v-show Demo

2020-03-08 19:36:03 作者：互联网

控制显示隐藏:
(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>

标签：显示,show,Demo,元素,else,pno,隐藏
来源： https://blog.csdn.net/weixin_46044574/article/details/104738571