条件渲染与列表渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>render</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 条件渲染 -->
<!-- 哪个<p>标签的条件成立,就渲染哪个标签,其他不满足条件的<p>标签就会被销毁 -->
<div>
<p v-if="score>=90">优秀</p>
<p v-else-if="score>=80">良好</p>
<p v-else-if="score>=70">中等</p>
<p v-else-if="score>=60">及格</p>
<p v-else>不及格</p>
</div>
<hr>
<!-- 列表渲染 -->
<div>
<ul>
<!-- v-for循环渲染<li>标签,
其中students是数据源,student是数组元素迭代的别名 -->
<li v-for="student in students">
name:{{student.name}},age:{{student.age}}
</li>
</ul>
</div>
<hr>
<div>
<ul>
<!-- index是索引,key是键名 -->
<li v-for="(value,key,index) in stu">
{{index}}---{{key}}:{{value}}
</li>
</ul>
</div>
</div>
<script>
var app =new Vue({
el:'#app',
data:{
score:80,
students:[
{name:'zhangsan',age:12},
{name:'lisi',age:23},
{name:'wangwu',age:11}
],
stu:{//键值对的形式保存的数据
name:'zhangsan',
age:31,
gender:'男'
},
}
})
</script>
</body>
</html>