Vue 单页面组件

 <template>
    <div>
        <div v-if="aa != 1">{{aa}}</div>
        <ul v-else>
            <div>{{aa}}</div>
        </ul>
    </div>
</template>
<script>
export default {
    props: {
        obj: {
            type: Object,
            default: {}
        }
    },
    data() {
        return {
            aa: 0
        };
    },
    onLoad() {},
    created() {
        this.aa = 1;
    },
    methods: {}
};
</script>

<style lang="scss"></style>

如果 aa为1,就再套一个父元素ul,但是我这样写,就比较麻烦,有其他办法吗???

可以用动态组件。is

典型的动态模板的场景。以静态模板的思路来实现就是你现在的样子。如果想更「高级」一点,可以套一个动态组件:

<div>
  <the-wrapper :wrap="aa === 1">
    <div>{{ aa }}</div>
  </the-wrapper>
</div>
{
  component: {
    TheWrapper: {
      functional: true,
      render: (h, {props, scopedSlots}) => {
        return props.wrap
          ? h('ul', scopedSlots.default())
          : scopedSlots.default()
      },
    },
  },
}

不过你把 <div> 作为 <ul> 的子元素,这样是不合法的。

2 Likes

你好,vue可以了,我现在用的是uniapp,这个不行吗?我用他里面的组件,没有转化

没用过 uni-app,不清楚了。

用过uniapp吗?这个可以用动态组件is吗?

应该可以的,uniapp也是用vue搞得啊

膜拜大神