vue中的for循環(huán)及自定義指令怎么用

這篇“vue中的for循環(huán)及自定義指令怎么用”文章的知識點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“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方法來通知這個(gè)array已經(jīng)發(fā)生變化

vue還增加了兩個(gè)方法來觀測array的變化：

• $set:如果直接設(shè)置array中的元素，不會觸發(fā)視圖的變化

this.selectArray[1] = 'newValue'  // 不會觸發(fā)視圖變化
this.selectArray.$set(1, 'newValue') // 會觸發(fā)視圖變化

• $remove:是splice的語法糖，用來從目標(biāo)元素中查找并且刪除這個(gè)元素

let itemIndex = this.selectArray.indexOf(selectItem)
this.selectArray.splice(itemIndex,1) // 刪除這個(gè)元素
this.selectArray.$remove(selectItem) // 同樣效果，不用查找index

vue不能檢測到下面數(shù)組的變化：

使用索引設(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提供了三個(gè)方法來監(jiān)視對象屬性：

• $add(key,value)

• $set(key,value)

• $delete(key)

自定義指令

Vue.directive('directiveName',{
    // 這里就是指令對象的內(nèi)部
    // 可以使用this來獲取有用的參數(shù)
    bind: () => {
        //  準(zhǔn)備工作：添加事件處理器等
        dom.addEventListener........
    },
    update: (oldVal,newVal) => {
        // 值更新的時(shí)候的工作
        //  初始化的時(shí)候也會被調(diào)用
    },
    unbind: () => {
        // 清理工作，比如接觸bind添加的事件處理器
    }
})

或

Vue.directive('directiveName',(value) => {
    // 代替update函數(shù)
})
// 使用指令
<div directiveName="argumentValue"></div>

在指令對象中，可以只用this來獲取一些有用的參數(shù)：

• this.el: 指令綁定的元素

• this.vm:指令的上下文viewModel

• this.expression: 指令的表達(dá)式

• this.arg:指令的參數(shù)

• this.name: 指令的名字

• this.modifiers:一個(gè)對象，指令的修飾符

• this.descriptor: 一個(gè)對象，指令的解析結(jié)果

vue自定義指令動態(tài)參數(shù)

通過自定義指令中的修飾符的key作為值,更改顯示的顏色

動態(tài)指令參數(shù)

當(dāng)參數(shù)是動態(tài)的時(shí)候。

main.js

//當(dāng)參數(shù)的值是動態(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)效果是一樣的。

以上就是關(guān)于“vue中的for循環(huán)及自定義指令怎么用”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。