当我们获取到后台数据之后,会按照一定的规则加载到前端写好的模板中,显示在浏览 器中,这个过程称之为渲染。
条件渲染
1. v-if、v-else 和 v-else-if
<!DOCTYPE html> <html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta charset="utf-8"/> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app" > <!--if、else、指令--> <p v-if="status==1">当status为1时,显示该行</p> <p v-else-if="status==2">当status为2时,显示该行</p> <p v-else-if="status==3">当status为3时,显示该行</p> <p v-else>否则显示该行</p> </div> <!--script脚本--> <script> //创建vue实例 var vm=new Vue({ el: '#app', data: { status: 2 } }); </script> </body> </html>
我们需要注意多个 v-if、v-else-if 和 v-else 之间需要紧挨着
2. v-show 实际上同 v-if 效果等同,当绑定事件的元素符合引号中的条件时,该元素才显示,代码 如下 <div id="app" > <!--if、else、指令--> <p v-show="status==1">当 status 为 1 时,显示该行</p> <p v-show="status==2">当 status 为 2 时,显示该行</p> </div> <script> //创建 vue 实例 var vm=new Vue({ el: '#app', data: { status: 2 } }); </script>
3. v-if 和 v-show 的区别
控制显示的方法不同:v-show 实际是通过修改 DOM 元素 的 display 属性来实现节点的显示和隐藏的,而 v-if 则是通过添加/删除 DOM 节点来实现的.
编译条件:v-if 是惰性的,只有在条件第一次变为真时才开始局部编译; v-show 是在不管初始条件是什么,都被编译, 然后被缓存,
性能消耗:v-if 有更高的切换消耗;v-show 有更高的初始渲染消耗;
使用场景:如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时 条件很少改变,当只需要一次显示或隐藏,则使用 v-if 较好。
Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染
<!DOCTYPE html> <html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta charset="utf-8"/> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app" > <p v-if="ok"> <label>Username</label> <input placeholder="Enter your username"> </p> <p v-else> <label>Email</label> <input placeholder="Enter your email address"> </p> <button @click="ok=!ok">切换</button> </div> <script type="text/javascript"> var vm=new Vue({ el: '#app', data: { ok: true, } }) </script> </body> </html>
页面中输入信息后点击切换按钮时,文本框里的内容并没有清空。 Vue 为我们提供了一种方式来声明“这两个元素是完全独立的—不要复用它们”。只 需添加一个具有唯一值的 key 属性即可,代码如下: <div id="app" > <p v-if="ok"> <label>Username</label> <input placeholder="Enter your username"key="username-input"> </p> <p v-else> <label>Email</label> <input placeholder="Enter your email address" key="email-input"> </p> <button @click="ok=!ok">切换</button> </div>
列表渲染 1.v-for 循环用于数组 v-for 指令根据一组数组的选项列表进行渲染。 对数组选项进行列表渲染 <!DOCTYPE html> <html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta charset="utf-8"/> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <ul id="app"> <li v-for="item in items"> {{ item.name }} </li> </ul> <script type="text/javascript"> var vm= new Vue({ el: '#app', data: { items: [ { name: 'beixi' }, { name: 'jzj' }, { name: 'beixi' }, { name: 'jzj' }, { name: 'beixi' }, { name: 'jzj' }, { name: 'beixi' }, { name: 'jzj' } ] } }) </script> </body> </html>
v-for 还支持一个可选的第二个参数为当前项的索引,索引从 0 开始,代码如下: <ul id="app"> <li v-for="(item,index) in items"> {{index}}-- {{ item.name }} </li> </ul>
v-for 来遍历对象 <!DOCTYPE html> <html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta charset="utf-8"/> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <ul id="app"> <li v-for="value in object"> {{ value }} </li> </ul> <script type="text/javascript"> var vm=new Vue({ el: '#app', data: { object: { name: 'beixi', gender: '男', age: 30 } } }) </script> </body> </html>
v-for 用于整数 <ul id="app"> <li v-for="n in 10"> {{n}} </li> </ul> <script type="text/javascript"> var vm=new Vue({ el: '#app', }) </script>
template 标签用法 Vue 提供了内置标签<template>,可以将多个元素进行渲染,代码如下: <div id="app"> <div v-if="ok"> <p>这是第一段代码</p> <p>这是第二段代码</p> <p>这是第三段代码</p> </div> </div> <script type="text/javascript"> var vm=new Vue({ el: '#app', data:{ ok:true } }) </script>
同样,<template>标签也支持使用 v-for 指令,用来渲染同级的多个兄弟元素,代码如 下: <ul id="app"> <template v-for="item in items"> { { item . name } } { { item.age }} </template> </ul> <script type="text/javascript"> var vm=new vue ( { el: '#app ', data: { items: [ { name : 'beixi' }, { age: 18 } ] } }) </script>