vue中的for循環(huán)以及自定義指令解讀
更新時(shí)間：2022年08月30日 15:43:24 作者：lcctt
這篇文章主要介紹了vue中的for循環(huán)以及自定義指令，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue for循環(huán)及自定義指令
v-for
1.v-for用來(lái)循環(huán)的數(shù)組怎么發(fā)生變化可以被vue檢測(cè)到：
push、pop、shift、unshift、splice、sort、reverse等方法可以被檢測(cè)到
vue對(duì)于這些方法的處理是重寫了這些方法，并在最后會(huì)觸發(fā)一次notify方法來(lái)通知這個(gè)array已經(jīng)發(fā)生變化
vue還增加了兩個(gè)方法來(lái)觀測(cè)array的變化：
$set:如果直接設(shè)置array中的元素，不會(huì)觸發(fā)視圖的變化
this.selectArray[1] = 'newValue' ?// 不會(huì)觸發(fā)視圖變化 this.selectArray.$set(1, 'newValue') // 會(huì)觸發(fā)視圖變化
$remove:是splice的語(yǔ)法糖，用來(lái)從目標(biāo)元素中查找并且刪除這個(gè)元素
let itemIndex = this.selectArray.indexOf(selectItem) this.selectArray.splice(itemIndex,1) // 刪除這個(gè)元素 this.selectArray.$remove(selectItem) // 同樣效果，不用查找index
vue不能檢測(cè)到下面數(shù)組的變化：
使用索引設(shè)置元素：
this.selectArray[1] = 'newValue'
解決辦法：使用$set方法
修改數(shù)據(jù)的長(zhǎng)度：
this.selectArray.length = 0
解決方法：使用空數(shù)組來(lái)替換：this.selectArray = []
2.使用v-for遍歷對(duì)象
使用別名
<li v-for = "(key,value) in obj"> {{key}}-{{value}}</li>不使用別名,使用$key
<li v-for = "value in obj"> {{$key}}-{{value}} </li>注意：es5無(wú)法檢測(cè)到對(duì)象增加新屬性，所以vue提供了三個(gè)方法來(lái)監(jiān)視對(duì)象屬性：
$add(key,value)$set(key,value)$delete(key)
自定義指令
Vue.directive('directiveName',{
?? ?// 這里就是指令對(duì)象的內(nèi)部
?? ?// 可以使用this來(lái)獲取有用的參數(shù)
?? ?bind: () => {
?? ??? ?// ?準(zhǔn)備工作：添加事件處理器等
?? ??? ?dom.addEventListener........
?? ?},
?? ?update: (oldVal,newVal) => {
?? ??? ?// 值更新的時(shí)候的工作
?? ??? ?// ?初始化的時(shí)候也會(huì)被調(diào)用
?? ?},
?? ?unbind: () => {
?? ??? ?// 清理工作，比如接觸bind添加的事件處理器
?? ?}
})或
Vue.directive('directiveName',(value) => {
?? ?// 代替update函數(shù)
})
// 使用指令
<div directiveName="argumentValue"></div>在指令對(duì)象中，可以只用this來(lái)獲取一些有用的參數(shù)：
this.el: 指令綁定的元素this.vm:指令的上下文viewModelthis.expression: 指令的表達(dá)式this.arg:指令的參數(shù)this.name: 指令的名字this.modifiers:一個(gè)對(duì)象，指令的修飾符this.descriptor: 一個(gè)對(duì)象，指令的解析結(jié)果
vue自定義指令動(dòng)態(tài)參數(shù)
通過(guò)自定義指令中的修飾符的key作為值,更改顯示的顏色
動(dòng)態(tài)指令參數(shù)
當(dāng)參數(shù)是動(dòng)態(tài)的時(shí)候。
main.js
//當(dāng)參數(shù)的值是動(dòng)態(tài)的時(shí)候
Vue.directive('color2', {
bind: function(el, binding) {
el.style.color = binding.value;
}
})
Vue.directive('color3', {
bind: function(el, binding) {
el.style.color = binding.arg;
}
})
template.vue中
<template>
<div class="demo">
<!-- value -->
<p v-color2='purpleUser'><i class="el-icon-user-solid"></i></p>
<p v-color2='redUser'><i class="el-icon-user-solid"></i></p>
<p v-color2='greenUser'><i class="el-icon-user-solid"></i></p>
<!-- arg -->
<p v-color3:[purpleUser]><i class="el-icon-user-solid"></i></p>
<p v-color3:[redUser]><i class="el-icon-user-solid"></i></p>
<p v-color3:[greenUser]><i class="el-icon-user-solid"></i></p>
</div>
</template>
<script>
export default {
data() {
return {
purpleUser: 'purple',
redUser: 'red',
greenUser: 'green'
}
},
created() {},
methods: {}
}
</script>
<style lange='scss' scoped>
p {
display: inline-block;
font-size: 40px;
}
</style>
參數(shù)是靜態(tài)的，將key的值作為value,改變顏色
main.js
Vue.directive('color', {
bind: function(el, binding) {
const color = Object.keys(binding.modifiers)[0]; //將key的值作為value,改變顏色，Object.keys獲取key的值；
el.style.color = color;
}
})
template.vue中
<template>
<div class="demo">
<p v-color.purple><i class="el-icon-user-solid"></i></p>
<p v-color.red><i class="el-icon-user-solid"></i></p>
<p v-color.green><i class="el-icon-user-solid"></i></p>
</div>
</template>
<script>
export default {
data() {
return {}
},
created() {},
methods: {}
}
</script>
<style lange='scss' scoped>
p {
display: inline-block;
font-size: 40px;
}
</style>
以上的方法，最終實(shí)現(xiàn)效果是一樣的。
好了，這些僅為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue中for循環(huán)作用域問(wèn)題處理方式
- vue element-ui v-for循環(huán)el-upload上傳圖片 動(dòng)態(tài)添加、刪除方式
- vue中關(guān)于v-for循環(huán)key值問(wèn)題的研究
- vue中v-for循環(huán)數(shù)組,在方法中splice刪除數(shù)組元素踩坑記錄
- vue v-for循環(huán)出來(lái)的數(shù)據(jù)動(dòng)態(tài)綁定值問(wèn)題
- vue如何在for循環(huán)中設(shè)置ref并獲取$refs
- vue.js中for循環(huán)如何實(shí)現(xiàn)異步方法同步執(zhí)行
相關(guān)文章
Vue3.0之引入Element-plus ui樣式的兩種方法
本文主要介紹了Vue3.0之引入Element-plus ui樣式的兩種方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
Vue3實(shí)現(xiàn)簡(jiǎn)約型側(cè)邊欄的示例代碼
本文主要介紹了Vue3實(shí)現(xiàn)簡(jiǎn)約型側(cè)邊欄的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
本文主要介紹了Vue3里的EffectScope，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了一文帶你搞定svg-icon的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue使用video.js依賴接入視頻流((hls(m3u8)、flv))的示例代碼
這篇文章給大家介紹了vue如和使用video.js依賴接入視頻流((hls(m3u8)、flv)),文章通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
父子組件之間的通信就是props down,events up,父組件通過(guò)屬性props向下傳遞數(shù)據(jù)給子組件,子組件通過(guò)事件events 給父組件發(fā)送消息,這篇文章主要給大家介紹了關(guān)于vue中組件的props屬性的相關(guān)資料,需要的朋友可以參考下2021-11-11
這篇文章主要為大家介紹了VUE2中的MVVM模式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
el-menu遞歸實(shí)現(xiàn)多級(jí)菜單組件的示例
本文主要介紹了el-menu使用遞歸組件實(shí)現(xiàn)多級(jí)菜單組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了vue 路由嵌套高亮問(wèn)題的解決方法，主路由通過(guò)v-for循環(huán)出來(lái)，次路由通過(guò)url拼接的方式導(dǎo)航到子路由頁(yè)面，具體實(shí)現(xiàn)代碼大家參考下本文2018-05-05
淺析Vue中Virtual?DOM和Diff原理及實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了Vue中Virtual?DOM和Diff原理及實(shí)現(xiàn)的相關(guān)知識(shí)，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2023-03-03