学习vue.js条件渲染
本文实例为大家分享了vue.js中条件渲染的练习代码，供大家参考，具体内容如下
html:
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>条件渲染</title>
</head>
<body>
<!--v-if作为判断条件如果满足则展示它所附着的元素的内容-->
<!--除了v-if还可以配合使用v-else-->
<divid="app-1"v-if="Math.random()>0.5">
{{message}}
</div>
<divid="app-2"v-else>
{{message2}}
</div>
<!--v-if使用时必须加在一个元素上如果想要根据一个判定条件展示多个数据的话要用到template-->
<!--template相当于一个包装元素不显示在网页上-->
<templatev-if="ok">
<h1>这是个标题</h1>
<p>lowrie</p>
</template>
<!--v-else还可以跟在v-show后-->
<!--注意：v-else必须紧跟在v-show或者v-if后否则浏览器不能识别-->
<!--v-show和v-if的区别v-show所附着的元素会一直存在于Dom层中是简单的切换元素的CSS属性display-->
<!--注意：v-show不支持template-->
<divv-show="ok">
我是v-show
</div>
<!--v-ifv-show对比：
v-if是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。
v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
相比之下，v-show简单得多——元素始终被编译并保留，只是简单地基于CSS切换。
一般来说，v-if有更高的切换消耗而v-show有更高的初始渲染消耗。因此，如果需要频繁切换使用v-show较好，如果在运行时条件不大可能改变则使用v-if较好。-->
<scriptsrc="js/vue.js"></script>
<scriptsrc="js/vuetext.js"></script>
</body>
</html>
js:
varapp1=newVue({
el:'#app-1',
data:{
message:'我的随机数大于0.5'
}
});
varapp2=newVue({
el:'#app-2',
data:{
message2:'我的随机数小于0.5'
}
});
本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。