v-if
v-else
v-else-if 条件性的渲染某元素,判定为true时渲染,否则不渲染
v-show 根据条件展示某元素,区别在于切换的是display属性的值
v-if在浏览器中element标签中如果不满足条件就不会渲染展示。
而v-show在浏览器中element标签中如果不满足条件的话,会只渲染,不展示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue-指令-v-if和v-show</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
年龄<input type="text" v-model="age">经判定,为:
<span v-if="age>0 && age<= 35">年轻人(35及以下)</span>
<span v-else-if="age>35 && age<60">中年人(35以上60岁以下)</span>
<span v-else>老年人(60岁以上)</span>
<br><br>
年龄<input type="text" v-model="age">经判定,为:
<span v-show="age>0 && age<= 35">年轻人(35及以下)</span>
<span v-show="age>35 && age<60">中年人(35以上60岁以下)</span>
<span v-show="age>=60">老年人(60岁以上)</span> <!-- show是在element中都展示,但是通过设置display属性=none在视图中隐藏 -->
</div>
</body>
<script>
new Vue({
el:"#app",
data: {
age:20
}
})
</script>
</html>