v-show Demo

2020-03-08 19:36:03 阅读：234 来源： 互联网

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

v-show Demo