模板语法_条件渲染
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p v-if="array.length == arraylength1">{{message1}}</p>
<p v-else-if="array.length == arraylength2">{{message2}}</p>
<p v-else>arraylength等于{{arraylength}}</p>
<button v-on:click="addNum()">addNum</button>
<p v-show="num %2 == 0">num={{num}} 可以被2 整除！</p>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
arraylength1:12,
arraylength2:10,
message1:"arrayLength 等于12",
message2:"arrayLength 等于10",
array:[0,1,2,3,4,5,6,7,8,9,10],
num:0,
},
methods:{
addArray:function(){
//this.arrar.push( this.array.length+1 );
},
addNum:function(){
this.num++;
}
},
computed:{
arraylength:function(){
return this.array.length;
}
},
})
</script>
</body>
</html>
小结：
<p v-if="array.length == arraylength1">{{message1}}</p>
<p v-else-if="array.length == arraylength2">{{message2}}</p>
<p v-else>arraylength等于{{arraylength}}</p>
v-if 和 v-show 区别
1 v-show 没有 v-else
2 v-show 不支持 template
3 v-show 只是来做简单的切换 css=>dispaly