<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--v-if 隐藏与显示 true(显示) false(隐藏) 删除了节点 -->
<p v-if="flg">今天星期二</p>
</div>
</body>
</html>
<script>
var app=new Vue({
el:"#app",
data:{
flg:false
}
});
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--v-show 隐藏与显示 true(显示) fasle(隐藏) 没有删除元素 -->
<p v-show="flg">今天星期二</p>
<!--
v-if 与 v-show区别
1.相同点：都可以实现隐藏与显示
2.不同点: v-if 隐藏之后 删除元素 v-show隐藏没有删除元素，只是添加了一个样式
-->
</div>
</body>
</html>
<script>
var app=new Vue({
el:"#app",
data:{
flg:false
}
});
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--v-if 和 v-else一起使用 注意: -->
<p>年龄如果大于等于18,显示成年人，否则显示未成年人</p>
<p v-if="age>=18">成年人</p>
<p v-else>未成年</p>
</div>
</body>
</html>
<script>
var app=new Vue({
el:"#app",
data:{
age:10
}
});
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>1.需求：判断考试的成绩,成绩>=90 优秀 >=80良好 >=60 还行 否则 不及格</p>
<p v-if="score>=90">优秀</p>
<p v-else-if="score>=80">良好</p>
<p v-else-if="score>=60">还行</p>
<p v-else>不及格</p>
<hr/>
<p>在数据库中性别 一般用 0(女) 和 表示1(男)</p>
<p v-if="sex==1">男</p>
<p v-if="sex==0">女</p>
</div>
</body>
</html>
<script>
var app=new Vue({
el:"#app",
data:{
score:66,
sex:1
}
});
</script>
循环 数组 对象 字符串 整数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>循环</title>
<script src="js/vue.js"></script>
<!--
1.v-for 可以循环 数组 对象 字符串 整数
-->
</head>
<body>
<div id="app">
<p style="background-color: pink;height: 40px">1.遍历的是数组</p>
<ul>
<!--stu(遍历出来的数据给他) in studnets(需要遍历的数据)-->
<li v-for="stu in studnets">{{stu.name}}=={{stu.age}}</li>
</ul>
<p style="background-color: pink;height: 40px">2.遍历的是对象</p>
<ul>
<li v-for="p in people">{{p}}</li>
</ul>
<p style="background-color: pink;height: 40px">3.遍历的是字符串</p>
<ul>
<li v-for="s in str">{{s}}</li>
</ul>
<p style="background-color: pink;height: 40px">4.遍历的是整数</p>
<button v-for="number in 5">第{{number}}页</button>
</div>
</body>
</html>
<script>
var app=new Vue({
el:"#app",
data:{
studnets:[
{"name":"小刚1","age":18},
{"name":"小刚2","age":16}
],
people:{"name":"王明阳","age":33},
str:"我爱我的祖国"
}
});
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>1.遍历的数组 参数1 遍历出来的数据 参数2 对象索引</p>
<ul>
<li v-for="(value,index) in studnets">
{{index+1}}、{{value.name}}
</li>
</ul>
<p>2.遍历是对象 参数1 遍历出来的数据 参数2属性的名称</p>
<ul>
<li v-for="(value,key) in people">
{{value}}
</li>
</ul>
</div>
</body>
</html>
<script>
var app = new Vue({
el: "#app",
data: {
studnets: [
{"name": "小刚1", "age": 18},
{"name": "小刚2", "age": 16}
],
people:{"name":"小非","age":18}
}
});
</script>
