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>