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