Vue第一部分(2): 数据的渲染
                                                            生活随笔
收集整理的這篇文章主要介紹了
                                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-for指令
遍歷數據渲染頁面是非常常用的需求,Vue中通過 v-for 指令來實現。?遍歷數組
語法: v-for="(item,index) in items"- items :要遍歷的數組,需要在vue的data中定義好。
- item :數組元素
- index:元素下標,可以省略
遍歷對象
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): 数据的渲染的全部內容,希望文章能夠幫你解決所遇到的問題。
 
                            
                        - 上一篇: java生成j动态页面_zk动态产生多个
- 下一篇: 【ES8(2017)】String扩展
