spring el表达式 if else_vue指令集合：v-for,v-show,v-if等
這一篇按照計劃講v-for,但是如果僅僅拿一篇來講的話，有點少了，所以這一篇就拿來介紹一下vue指令吧。
什么是指令
解釋：指令 (Directives) 是帶有 v- 前綴的特殊屬性
作用：當表達式的值改變時，將其產生的連帶影響，響應式地作用于 DOM
文本
v-text
解釋：更新DOM對象的 textContent（文本內容）
為了我更新方便，以后HTML和JavaScript都寫在一個代碼塊里。
<body><div id="app"><div v-text="msg"></div></div><script>var app = new Vue({el: "#app",data: {msg: "這里v-text內容"},})</script></body>v-text和插值表達式的區別
一、如果不做任何處理的話，那么v-text與插值表達式相比較，沒有閃現問題。
二、v-text會覆蓋元素中元素中原本的內容。插值表達式只會替換該元素，不會覆蓋其它內容。
共同點
把里面元素渲染出來，并不會編譯標簽
更新到這里，其實有一個問題，就是如果當網速慢的時候，會有一個閃現的問題，針對閃現的問題，我們可以用v-clock
v-cloak
作用：處理插值表達式閃現的問題
處理方法：
在該標簽中添加v-cloak。
<body><style>[v-cloak] {display: none;}</style><div id="app"><div v-cloak>{{msg}}</div></div><script>var app = new Vue({el: "#app",data: {msg: "這里v-text內容"},})</script> </body>如果后期項目由路由、webpack來掛載的話，那么就不需要v-cloak來解決閃動這個問題了。
v-html
解釋：更新DOM對象的 innerHTML
<body><div id="app"><div v-html="msg"></div></div><script>var app = new Vue({el: "#app",data: {msg: "<h1>這里是v-html內容</h1>"},})</script> </body>v-bind
作用：當表達式的值改變時，將其產生的連帶影響，響應式地作用于 DOM
語法：v-bind:title="msg"
簡寫：:title="msg"
縮寫符為“：”
用法介紹參考網址：
soviya：VUE操作classstyle綁定屬性綁定事件事件修飾符?zhuanlan.zhihu.comv-on
作用：綁定事件
語法：v-on:click="say" or v-on:click="say('參數', $event)"
簡寫：@click="say"
說明：綁定的事件從methods中獲取
縮寫符為“@”
soviya：VUE操作classstyle綁定屬性綁定事件事件修飾符?zhuanlan.zhihu.comv-for
作用：基于源數據多次渲染元素或模板塊
v-for="（site，key ，index)in sites"
sites為在data里面對象名。
key為sites里面的健值名
index為sites里面的序列號（從0開始）。
v-for數組用法
<body><div id="app"><div v-for="(site,index) in siteObject">{{index}}--{{site}}</div></div><script>var app = new Vue({el: "#app",data: {siteObject: ["第一個","第二個","第三個",]},})</script> </body>出一個問題，我們如何讓它倒序顯示呢？
<body><div id="app"><div v-for="(site,index) in siteObject">{{index}}--{{site}}</div></div><script>var app = new Vue({el: "#app",data: {siteObject: ["第一個","第二個","第三個",]},created: function() {this.add();this.reverse();},methods: {add: function() {this.siteObject.push("第四個");},reverse: function() {this.siteObject.reverse();}}})</script> </body>這里還簡單示例了一下向數組添加一個元素。
v-for對象用法
<body><div id="app"><div v-for="(site,key,index) in siteObject">{{index}}--{{key}}--{{site}}</div></div><script>var app = new Vue({el: "#app",data: {siteObject: {age: "23",name: "王五"}}})</script> </body>v-if 和 v-show
這兩個都用于條件渲染
v-if：根據表達式的值的真假條件，銷毀或重建元素
<body><div id="app"><div v-if="isShow">{{msg}}</div></div><script>var app = new Vue({el: "#app",data: {isShow: false,msg: "這里是v-if內容"}})</script> </body>v-show：根據表達式之真假值，切換元素的 display CSS 屬性
<body><div id="app"><div v-show="isShow">{{msg}}</div></div><script>var app = new Vue({el: "#app",data: {isShow: false,msg: "這里是v-show內容"}})</script> </body>我們在審查元素的時候，就可以看到msg內容有加載，只不過dispaly為none了。
這兩個區別在于v-if只有在條件為真的情況下會去加載里面內容，v-show是不管任何值都會去加載里面內容，然后再根據里面值真假去操作display是否顯示。在進行頻繁操作的時候建議使用v-show
提升性能：v-pre
1、說明：跳過這個元素和它的子元素的編譯過程。可以用來顯示原始 Mustache 標簽。跳過大量沒有指令的節點會加快編譯
2、簡單來說，如果使用該標簽，那么里面這個標簽里面所元素都不會被編譯出來。
使用方法
<body><div id="app"><div v-pre>{{msg}}</div></div><script>var app = new Vue({el: "#app",data: {msg: "這里是一段內容"}})</script> </body>我們看到頁面還是{{msg}}，并沒有編譯出來。
提升性能：v-once
1、說明：只渲染元素和組件一次。隨后的重新渲染，元素/組件及其所有的子節點將被視為靜態內容并跳過。這可以用于優化更新性能。
2、簡單來說，如果使用該標簽，那么只渲染當前使用者一次。之后都不會再被渲染。
使用方法
<body><div id="app"><div v-once>{{msg}}</div></div><script>var app = new Vue({el: "#app",data: {msg:"這里是v-once內容"}})</script> </body>與50位技術專家面對面20年技術見證，附贈技術全景圖
總結
以上是生活随笔為你收集整理的spring el表达式 if else_vue指令集合：v-for,v-show,v-if等的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： c2064 项不会计算为接受0个参数的函
- 下一篇： c++ vector 赋值_Vector