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>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
