Vue内置指令——v-if、v-else-if、v-else
v-if 指令用于条件性地渲染一块内容,Vue会根据表达式的值的真假条件来渲染元素。v-else是搭配 v-if 使用,v-else元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。类似 JS 的 if … else。v-else-if充当v-if的else-if块,可以链式的使用多次。 类似JS的 if … else if … else。.........
·
v-if 指令用于条件性地渲染一块内容,Vue会根据表达式的值的真假条件来渲染元素。
v-else是搭配 v-if 使用,v-else元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。类似 JS 的 if … else。
v-else-if充当v-if的else-if块,可以链式的使用多次。 类似JS的 if … else if … else。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>条件渲染</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>
成绩等级:
<span v-if="score<=100 && score>=90">A</span>
<span v-else-if="score<90 && score>=80">B</span>
<span v-else-if="score<80 &&score>=60">C</span>
<span v-else-if="score<60 && score>=0">D</span>
<span v-else>非法</span>
</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
score:100
}
});
</script>
</body>
</html>
更多推荐
已为社区贡献1条内容
所有评论(0)