Vue。js学习系列(二十四)--条件语句(二)

原创
2017/03/16 14:01
阅读数 19

3.v-else

必须跟在v-if/v-show指令之后,不然不起作用;

如果v-if/v-show指令的表达式为true,则else元素不显示;如果v-if/v-show指令的表达式为false,则else元素显示在页面上;

下面我们通条件语句来判断2是否大于1,如果大于1则输出true,否则输出false

<!DOCTYPE html>v-else

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="src/vue.min.js"></script>

</head>

<body>

<div id="app">

<div v-if="2>1">

true

</div>

<div v-else>

false

</div>

</div>

<script type="text/javascript">

new Vue({

el:"#app"

})

</script>

 

</body>

</html>

运行结果:


 

4.v-else-if

v-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="src/vue.min.js"></script>

</head>

<body>

<div id="app">

<div v-if="type==='A'">A</div>

<div v-else-if="type==='B'">B</div>

<div v-else-if="type==='C'">C</div>

<div v-else>not A/B/C</div>

</div>

<script type="text/javascript">

new Vue({

el:"#app",

data:{

type:"A"

}

})

</script>

</body>

</html>

运行之后,在页面上显示A。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部