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