v-show
- 根据表达式的值的真假条件渲染元素,改变
css
中的display
属性,注意是改变css中的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue指令</title>
<style>
div {
width: 100px;
height: 100px;
background: red
}
</style>
</head>
<body>
<div id="app">
<!-- v-show -->
<!-- 判断是否加载,如果为真,就加载,否则不加载-->
<div v-show="isShow"></div>
<!--引入vue.js文件 -->
<script src="./vue.js"></script>
<script>
//创建一个vue实例
var app = new Vue({
el: '#app',//填入需要vue管理的元素选择器,也可以使类选择器
//将需要的数据填入data属性中(data是一个对象)
data: {
isShow:true
},
//将事件处理函数写在methods属性中(methods是一个对象)
//需要和事件处理函数名称一致,可以是带参也可以不带参
methods: {
},
})
</script>
</body>
</html>
页面显示结果如下:
如图,当表达式中的值为false
时,仅仅改变的是css
属性display
v-if
- 根据表达式的值的真假条件渲染元素,动态地从
DOM
树内添加或者移除DOM
元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue指令</title>
</head>
<body>
<div id="app">
<!-- v-if -->
<!-- 判断是否加载,如果为真,就加载,否则不加载-->
<div v-if="isShow"></div>
<!--引入vue.js文件 -->
<script src="./vue.js"></script>
<script>
//创建一个vue实例
var app = new new Vue({
el: '#app',//填入需要vue管理的元素选择器,也可以使类选择器
//将需要的数据填入data属性中(data是一个对象)
data: {
scope:90
},
//将事件处理函数写在methods属性中(methods是一个对象)
//需要和事件处理函数名称一致,可以是带参也可以不带参
methods: {
},
})
</script>
</body>
</html>
页面显示结果如下:
如图,可以看到该节点已从dom树中移除
v-show 和 v-if的区别
v-show
将标签的display
设置为none
,控制隐藏- v-show只会编译一次,后面只需要控制css就能实现显示隐藏
v-if
是动态的向DOM树内添加或者移除DOM元素v-if
切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件
v-if
需要不断地创建移除,故在对节点需要频繁的显示隐藏时,使用v-show
会更好一点。