03、vue.js 之数据渲染
2017-05-22 11:36
579 查看
v-if指令
v-if是条件渲染指令,它根据表达式的真假来删除和插入元素,它的基本语法如下:
v-if="expression"
expression是一个返回bool值的表达式,表达式可以是一个bool属性,也可以是一个返回bool的运算式。例如:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <h1>Hello, Vue.js!</h1> <h1 v-if="yes">Yes!</h1> <h1 v-if="no">No!</h1> <h1 v-if="age >= 25">Age: {{ age }}</h1> <h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1> </div> </body> <script src="js/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { yes: true, no: false, age: 28, name: 'keepfool' } }) </script> </html>
注意:yes, no, age, name这4个变量都来源于Vue实例选项对象的data属性。
这段代码使用了4个表达式:
数据的
yes属性为true,所以"Yes!"会被输出;
数据的
no属性为false,所以"No!"不会被输出;
运算式
age >= 25返回true,所以"Age: 28"会被输出;
运算式
name.indexOf('jack') >= 0返回false,所以"Name: keepfool"不会被输出。
注意:v-if指令是根据条件表达式的值来执行元素的插入或者删除行为。
这一点可以从渲染的HTML源代码看出来,面上只渲染了3个<h1>元素,
v-if值为false的<h1>元素没有渲染到HTML。
为了再次验证这一点,可以在Chrome控制台更改age属性,使得表达式
age >= 25的值为false,可以看到
<h1>Age: 28</h1>元素被删除了。
age是定义在选项对象的data属性中的,为什么Vue实例可以直接访问它呢?
这是因为每个Vue实例都会代理其选项对象里的data属性。
v-show指令
v-show也是条件渲染指令,和v-if指令不同的是,使用
v-show指令的元素始终会被渲染到HTML,它只是简单地为元素设置CSS的style属性。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <h1>Hello, Vue.js!</h1> <h1 v-show="yes">Yes!</h1> <h1 v-show="no">No!</h1> <h1 v-show="age >= 25">Age: {{ age }}</h1> <h1 v-show="name.indexOf('jack') >= 0">Name: {{ name }}</h1> </div> </body> <script src="js/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { yes: true, no: false, age: 28, name: 'keepfool' } }) </script> </html>
age >= 25的值为false,可以看到
<h1>Age: 24</h1>元素被设置了style="display:none"样式。
v-else指令
可以用v-else指令为
v-if或
v-show添加一个“else块”。
v-else元素必须立即跟在
v-if或
v-show元素的后面——否则它不能被识别。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <h1 v-if="age >= 25">Age: {{ age }}</h1> <h1 v-else>Name: {{ name }}</h1> <h1>---------------------分割线---------------------</h1> <h1 v-show="name.indexOf('keep') >= 0">Name: {{ name }}</h1> <h1 v-else>Sex: {{ sex }}</h1> </div> </body> <script src="js/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { age: 28, name: 'keepfool', sex: 'Male' } }) </script> </html>
v-else元素是否渲染在HTML中,取决于前面使用的是
v-if还是
v-show指令。
这段代码中
v-if为true,后面的
v-else不会渲染到HTML;
v-show为tue,但是后面的
v-else仍然渲染到HTML了。
v-for指令
v-for指令基于一个数组渲染一个列表,它和JavaScript的遍历语法相似:
v-for="item in items"
items是一个数组,item是当前被遍历的数组元素。
隐藏代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="styles/demo.css" /> </head> <body> <div id="app"> <table> <thead> <tr> <th>Name</th> <th>Age</th> <th>Sex</th> </tr> </thead> <tbody> <tr v-for="person in people"> <td>{{ person.name }}</td> <td>{{ person.age }}</td> <td>{{ person.sex }}</td> </tr> </tbody> </table> </div> </body> <script src="js/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { people: [{ name: 'Jack', age: 30, sex: 'Male' }, { name: 'Bill', age: 26, sex: 'Male' }, { name: 'Tracy', age: 22, sex: 'Female' }, { name: 'Chris', age: 36, sex: 'Male' }] } }) </script> </html>
我们在选项对象的data属性中定义了一个people数组,然后在#app元素内使用
v-for遍历people数组,输出每个person对象的姓名、年龄和性别。
注意:
相关文章推荐
- Vue.js搭建移动端购物车界面-基本结构和数据渲染
- 解决vue.js 数据渲染成功仍报错的问题
- Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
- Vue.js 数据绑定渲染Demo
- vue.js 数据渲染成功仍报错的问题
- Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面
- Vue.js v-bind遇到的数据渲染问题
- Vue.js双向数据绑定模板渲染
- Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
- vue.js 列表渲染
- VUEJS实战之构建基础并渲染出列表(1)
- AngularJS实战之渲染完数据后执行js
- Vue.js每天必学之数据双向绑定
- vue.js 条件渲染
- Vuejs——(1)入门(单向绑定、双向绑定、列表渲染、响应函数)
- Vue.js——基于$.ajax实现数据的跨域增删查改【4】
- Vuejs——(2)Vue生命周期,数据,手动挂载,指令,过滤器
- Vuejs——(1)入门(单向绑定、双向绑定、列表渲染、响应函数)
- vue.js表单数据双向绑定
- Vue.js数据绑定语法