条件渲染与列表渲染
<!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>
