插值表達式

數據綁定最常見的形式就是使用 {{值}} （雙大括號）的文本插值： <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個元素上，一定會先執行數組遍歷，然后再執行判斷， 出于性能的考慮，官方并不建議我們連用

總結

以上是生活随笔為你收集整理的Vue第一部分(2)： 数据的渲染的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。