控制显示隐藏:
(1). 一个元素，控制是否显示：v-show
<元素 v-show=“判断条件”>
结果：每次new Vue扫描带有v-show的元素时，都会动态判断条件。如果条件返回true，就正常显示。如果条件返回false，就自动翻译为display:none，隐藏该元素
(2). 两个元素，二选一显示: v-if v-else
<元素1 v-if=“条件”>
<元素2 v-else>
结果: 在扫描时，如果条件为true，就显示v-if的元素，如条件为false，就显示v-else的元素
强调: v-if和v-else两个元素之间禁止插入其他元素。两个元素必须紧邻
v-show vs v-if
v-show使用display:none隐藏元素 —— 效率高
v-if是通过删除元素方式隐藏元素 —— 效率低
<body>
<div id="app">
<!--pno>第一页时，才显示上一页按钮-->
<button v-show="pno>1" @click="change(-1)">上一页</button>
<span>{{pno}}/{{pcount}}</span>
<!--pno<最后一页时，才显示下一页按钮-->
<button v-show="pno<pcount" @click="change(+1)">下一页</button>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
pno:1, //现在第1页
pcount:3 //共3页
},
methods:{
change(i){
this.pno+=i;
}
}
})
</script>
</body>
1617
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
