v-show指令
语法
v-show= 表达式
- 根据表达式结果的真假, 确定是否显示当前元素。
v-show操作的是该元素CSS的display属性。- true表示显示这个元素
display: block。 - false表示隐藏元素,
display: none。
作用
- 控制切换一个元素的是否显示
- 元素在隐藏的情况下, 不会破坏dom结构
基本用法
<div id='app'>
<p v-show='isRain'>真的下雨啦!</p>
</div>
var app = new Vue({
el: '#app',
data: {
isRain: true // false是不显示元素 p标签还在dom结构里
}
})
v-if指令
语法
v-if = 表达式
- 根据表达式的结果的真假, 来插入或移除元素
- true表示显示这个元素
- false表示从dom中移除
<p v-if='Math.random() > 0.5'>可以看见我吗?</p>
作用
- 条件判断一个元素的是否显示或移除
- 条件为true, 元素插入dom
- 条件为false,元素从dom移除
基本用法
<div id='app'>
<p v-if='ok'>Yes</p>
</div>
var app = new Vue({
el: '#app',
data: {
ok: true // false是移除元素 也就移除p标签
}
})
v-else指令
语法
v-else
- 不需要表达式
- 必须放在
v-if后 - 等同于条件语句
if...else
作用
- 表示
v-if的值为false下的情况
<p v-if='ok'>Yes</p>
<p v-else>No</p>
基本用法
<div id='app'>
<p v-if='ok'>Yes</p>
<p v-else>No</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
ok: false // 执行else语句块
}
})
</script>
v-else-if指令
语法
v-else-if=表达式
- 必须放在
v-if后 - 等同于条件语句
if..else..if - 只要表达式为true,就会执行代码
- 可以使用多次
基本用法
- 在多种选择的情况下使用该语句
- 只能有一种结果
<div id="app">
<div v-if="name === 'A'">
Ada
</div>
<div v-else-if="name === 'B'">
Beer
</div>
<div v-else-if="name === 'C'">
Candy
</div>
<div v-else>
没有匹配的名字
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
name: 'B' // 显示匹配B并为true的元素
}
})
</script>
v-if 和 v-show的区别
| true | false | CSS的display | |
|---|---|---|---|
| v-if | 元素会渲染在dom上 | 元素从dom中移除 | |
| v-show | 元素会渲染在dom上 | 元素会渲染在dom上 | 切换display: none, block |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.js" ></script>
<script>
$(function(){
$("[lk-show]").each(function(){
var val = $(this).attr("lk-show");
eval("var result = "+ val);
if (result) {
$(this).show();
}else {
$(this).hide();
}
});
})
</script>
</head>
<body>
<div lk-show="2 > 1">likang</div>
</body>
</html>