Vue简明实用教程(05)——v-if和v-show指令
Posted 谷哥的小弟
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue简明实用教程(05)——v-if和v-show指令相关的知识，希望对你有一定的参考价值。
版权声明
- 本文原创作者：谷哥的小弟
- 作者博客地址：http://blog.csdn.net/lfdfhl
v-if和v-show指令概述
v-if和v-show指令用于根据判断条件显示或隐藏元素。
当条件判断结果为真时显示元素，当条件判断结果为假时隐藏元素。
语法
v-if="true|false|逻辑运算表达式|data中boolean类型变量的值"
v-show="true|false|逻辑运算表达式|data中boolean类型变量的值"
区别
v-if底层通过控制dom树上节点实现页面标签的展示和隐藏
v-show底层通过控制元素css中display属性实现元素展示和隐藏
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
v-if和v-show指令示例
在此，以示例形式详细介绍v-if和v-show指令的基本使用。
示例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<!-- 引入vue -->
<script src="js/vue.js"></script>
<script type="text/javascript">
// 入口函数
window.onload = function () {
new Vue({
el: "#div1",
data: {
name: "谷哥的小弟",
number: 9527,
isIf: true,
isShow: false
},
methods: {
}
});
}
</script>
</head>
<body>
<h2 style="color: red;">本文作者：谷哥的小弟</h2>
<h2 style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
<div id="div1">
<h3 v-if="true">设置v-if="true"</h3>
<h3 v-show="false">设置v-show="false"</h3>
<h3 v-if="isIf">设置v-if="isIf"</h3>
<h3 v-show="isShow">设置v-show="isShow"</h3>
<h3 v-show="9>6">设置v-show="9>6"</h3>
<h3 v-show="name.length>2">{{name}}</h3>
</div>
</body>
</html>
示例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<!-- 引入vue -->
<script src="js/vue.js"></script>
<script type="text/javascript">
// 入口函数
window.onload = function () {
new Vue({
el: "#div1",
data: {
name: "谷哥的小弟",
number: 9527,
isShow: false
},
methods:{
// 修改data中isShow的值
showElement(){
this.isShow=true;
},
// 修改data中isShow的值
hideElement(){
this.isShow=false;
},
// 修改data中isShow的值
switchElement(){
this.isShow=!this.isShow;
}
}
});
}
</script>
</head>
<body>
<h2 style="color: red;">本文作者：谷哥的小弟</h2>
<h2 style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
<div id="div1">
<!--依据data中的isShow控制标签的隐藏与显示-->
<h3 v-show="isShow">{{name}}</h3>
<button @click="showElement">显示元素</button>
<br/><br/>
<button @click="hideElement">隐藏元素</button>
<br/><br/>
<button @click="switchElement">切换元素的隐藏与显示</button>
<br/><br/>
</div>
</body>
</html>
示例3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<!-- 引入vue -->
<script src="js/vue.js"></script>
<script type="text/javascript">
// 入口函数
window.onload = function () {
new Vue({
el: "#div1",
data: {
name: "谷哥的小弟",
number: 9527,
isShow: true
},
methods:{
// 修改data中isShow的值
showElement(){
this.isShow=true;
},
// 修改data中isShow的值
hideElement(){
this.isShow=false;
},
}
});
}
</script>
</head>
<body>
<h2 style="color: red;">本文作者：谷哥的小弟</h2>
<h2 style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
<div id="div1">
<!-- 利用鼠标悬停和移出事件修改data中isShow的值从而隐藏或显示元素 -->
<div style="width: 450px;height: 200px;background: greenyellow;" v-show="isShow" @mouseover="hideElement" @mouseout="showElement"></div>
</div>
</body>
</html>
以上是关于Vue简明实用教程(05)——v-if和v-show指令的主要内容，如果未能解决你的问题，请参考以下文章