Vue第一部分(2)： 数据的渲染

插值表达式

数据绑定最常见的形式就是使用 {{ 值 }} （双大括号）的文本插值：

<div id="app">
 <h1>{{msg}}</h1>
 </div>
 <script> 
const vm = new Vue({ 
el:"#app", 
data:{msg:"hello vue" }
 })
 </script>

说明： {{}} 中通常是变量，但也可以是表达式（比如 a+b ）、有返回值的函数调用。

v-text和v-html指令

v-text指令

如果数据不是预先定义好，而是通过网络获取时，使用 {{}} 方式在网速较慢时会出现问题。在数据未

加载完成时，页面会显示出原始的 {{}} ，加载完毕后才显示正确数据，称为插值闪烁。此时，可以使

用 v-text 代替插值表达式：

<div id="app">
 <h1 v-text="msg">
</h1>
 </div>
 <script> 
const vm = new Vue({
 el:"#app", 
data:{msg:"hello vue" }
 }) 
</script>

v-html指令

如果数据中包含有 HTML 标签，双大括号和 v - text 指令 会将数据解释为普通文本，而非 HTML 代码。

为了输出真正的 HTML ，你需要使用 v - html 指令 ：

<div id="app"> 
<h1>{{msg}}</h1> 
<h1 v-text="msg"></h1> 
<h1 v-html="msg"></h1>
 </div> 
<script> 
const vm = new Vue({
 el:"#app",
 data:{
msg:"<span style='color:red'>hello vue</span>"
 } 
}) 
</script>

v-if和v-show指令

v-if指令

v - if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。

<div id="app"> 
<h1 v-if="show">
 <span style="color:green">show=true</span> 
</h1> 
<h1 v-if="!show"> 
<span style="color:red">show=false</span> 
</h1>
 <button onclick="handleClick()">点我</button> 
</div> 
<script>
 const vm = new Vue({ 
el:"#app", 
data:{show:true } 
})
function handleClick(){ 
vm.show = !vm.show; 
} 
</script>

v - if 后还可以添加 v - else 指令来表示 v - if 的 “else 块 ” ，上面的示例还可以写出如下代码：

<div id="app">
 <h1 v-if="show"> 
<span style="color:green">show=true</span>
 </h1> 
<h1 v-else> 
<span style="color:red">show=false</span> 
</h1> 
<button onclick="handleClick()">点我</button> 
</div> 
<script>
 const vm = new Vue({ 
el:"#app", 
data:{show:true }
 })
function handleClick(){
 vm.show = !vm.show; 
} 
</script>

v-show指令

另一个用于根据条件展示元素的指令是 v - show 指令。和 v - if 用法大致一样，不过 v - show 后不能跟 v - else ：

<div id="app">
 <h1 v-show="show">
<span style="color:green">show=true</span> 
</h1> 
<h1 v-show="!show"> 
<span style="color:red">show=false</span> 
</h1> 
<button onclick="handleClick()">点我</button> 
</div> 
<script> 
const vm = new Vue({ 
el:"#app", 
data:{show:true }
 })
function handleClick(){ vm.show = !vm.show; }
 </script>

v-if 和 v-show 的区别：

<div id="app">
 <h1 v-if="show"> 
<span style="color:green">v-if指令</span> 
</h1> 
<h1 v-show="show">
 <span style="color:green">v-show指令</span>
 </h1> 
<button onclick="handleClick()">点我</button>
</div> 
<script> const vm = new Vue({ 
el:"#app", 
data:{show:true }
 })
function handleClick(){ vm.show = !vm.show; } 
</script>

v-if 和 v-show 指令展示效果相同，但是打开开发者工具（ F12 或者 ctrl+shift+i) 查看 Element 面板，会发现2 者的区别

• v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的子组件适当地被销毁和重建。 当初始条件为false时，其内部组件不会渲染。
• v-show 就简单得多，它在切换过程中，只是简单地基于 CSS 进行切换。当初始条件为false时， 其内部组件也会预先渲染。

一般来说， v - if 有更高的切换开销，而 v - show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v - show 较好；如果在运行时条件很少改变，则使用 v - if 较好。

 

v-for指令

遍历数据渲染页面是非常常用的需求， Vue 中通过 v - for 指令来实现。

 遍历数组

语法：

v-for="(item,index) in items"

• items ：要遍历的数组，需要在vue的data中定义好。
• item ：数组元素
• index：元素下标，可以省略

示例

<div id="app"> 
<ul>
<li v-for="(item,index) in favorites">{{index+ ":"+item}}</li>
 </ul> 
</div>
 <script> 
var vm = new Vue({ 
el:"#app", 
data:{
favorites:['唱','跳','Rap','打篮球']
 } 
}); 
</script>

再看一个对象数组的示例

<div id="app">
 <table>
<thead> 
<tr>
<th>name</th> 
<th>age</th>
 <th>gender</th>
 </tr> 
</thead>
 <tbody>
 <tr v-for="u in users"> 
<td>{{u.name}}</td> 
<td>{{u.age}}</td>
 <td>{{u.gender}}</td>
 </tr> 
</tbody> 
</table> 
<button onclick="addPerson()">点我</button> 
</div> 
<script> 
const vm = new Vue({
 el:"#app", 
data:{
users: [ {"name": "小明", "age": 13, "gender": "男"}, {"name": "小红", "age": 13, "gender": "女"},
{"name": "小绿", "age": 4, "gender": "男"} ] 
} 
}); 
function addPerson(){
 vm.users.push({"name": "小翠", "age": 14, "gender": "女"})
 } 
</script>

遍历对象

v - for 除了可以迭代数组，也可以迭代对象。语法基本类似

 

语法

 

v - for = "value in object"

v - for = "(value,name) in object"

v - for = "(value,name,index) in object"

 

• 1个参数时，得到的是对象的属性值
• 2个参数时，第一个是属性值，第二个是属性名
• 3个参数时，第三个是索引，从0开始

示例代码

<div id="app"> 
<ul>
<li v-for="(value,name,index) in person">
{{index}} - {{name}}={{value}}
 </li>
</ul> 
<button onclick="changePerson()">点我</button>
 </div> 
<script>
 const vm = new Vue({
 el:"#app", 
data:{
person:{ "name": "zhangsan", "age": 13, "gender": "男", "address": "中国" }
 } 
})
function changePerson(){
 vm.person = { "name": "lisi", "age": 16, "gender": "女", "address": "中国" } 
} 
</script>

 

注意：由于 v - for 优先级比 v - if 高，用在同 1 个元素上，一定会先执行数组遍历，然后再执行判断，

出于性能的考虑，官方并不建议我们连用

 v-for时的key属性

当我们需要更新 v-for 渲染过的元素列表时，比如向数组中添加一个新的元素。为了保证 Vue 正确并高

效的渲染页面，官方建议我们为每项提供一个唯一 key 属性，以便它能跟踪每个节点的身份，从而重

用和重新排序现有元素。 key 一般使用在遍历完后，又增、减数组的元素的时候更有意义。

示例：

<ul>

<li v-for = "(item,index) in items" :key = "index" ></li>

</ul>

• 这里使用了属性赋值语法： :key="index" 为每一个生成的元素设置一个唯一的key属性
• 这里绑定的key是数组的索引，应该是唯一的