vue之v-if基本使用
【摘要】 vue之v-if基本使用
v-if：根据表达式的真假，切换元素的显示和隐藏（操作DOM元素）
<body>
<div id="app">
<input type="button" value="切换显示" @click="toggleIsShow">
<p v-if="isShow">兮动人</p>
<p v-show="isShow">兮动人 v-show 修饰</p>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
isShow: false
},
methods: {
toggleIsShow: function () {
this.isShow = !this.isShow;
}
}
})
</script>
</body>
- 通过控制台可以发现，v-show 的作用是把元素赋予 display:none 隐藏起来，而 v-if 是直接把元素给去掉
- 案例：v-if 表达式应用
<body>
<div id="app">
<h2 v-if="age>=35">年龄大小</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
age: 40
}
})
</script>
</body>
- 把上面age的默认值改为20，就显示不出了
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）