vue中的for循环以及自定义指令解读
短信预约 -IT技能 免费直播动态提醒
vue for循环及自定义指令
v-for
1.v-for用来循环的数组怎么发生变化可以被vue检测到：
push、pop、shift、unshift、splice、sort、reverse等方法可以被检测到
vue对于这些方法的处理是重写了这些方法，并在最后会触发一次notify方法来通知这个array已经发生变化
vue还增加了两个方法来观测array的变化：
$set:如果直接设置array中的元素，不会触发视图的变化
this.selectArray[1] = 'newValue' // 不会触发视图变化
this.selectArray.$set(1, 'newValue') // 会触发视图变化$remove:是splice的语法糖，用来从目标元素中查找并且删除这个元素
let itemIndex = this.selectArray.indexOf(selectItem)
this.selectArray.splice(itemIndex,1) // 删除这个元素
this.selectArray.$remove(selectItem) // 同样效果，不用查找indexvue不能检测到下面数组的变化：
使用索引设置元素：
this.selectArray[1] = 'newValue'解决办法：使用$set方法
修改数据的长度：
this.selectArray.length = 0解决方法：使用空数组来替换：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提供了三个方法来监视对象属性：
$add(key,value)$set(key,value)$delete(key)
自定义指令
Vue.directive('directiveName',{
// 这里就是指令对象的内部
// 可以使用this来获取有用的参数
bind: () => {
// 准备工作：添加事件处理器等
dom.addEventListener........
},
update: (oldVal,newVal) => {
// 值更新的时候的工作
// 初始化的时候也会被调用
},
unbind: () => {
// 清理工作，比如接触bind添加的事件处理器
}
})或
Vue.directive('directiveName',(value) => {
// 代替update函数
})
// 使用指令
<div directiveName="argumentValue"></div>在指令对象中，可以只用this来获取一些有用的参数：
this.el: 指令绑定的元素this.vm:指令的上下文viewModelthis.expression: 指令的表达式this.arg:指令的参数this.name: 指令的名字this.modifiers:一个对象，指令的修饰符this.descriptor: 一个对象，指令的解析结果
vue自定义指令动态参数
通过自定义指令中的修饰符的key作为值,更改显示的颜色
动态指令参数
当参数是动态的时候。
main.js
//当参数的值是动态的时候
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>
参数是静态的，将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>
以上的方法，最终实现效果是一样的。
好了，这些仅为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
