vue中的for循环及自定义指令怎么用
导读:本文共3237.5字符,通常情况下阅读需要11分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要:这篇“vue中的for循环及自定义指令怎么用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue中的for循环及自定义指令怎么用”文章吧。vue for循环及自定义指令v-for1.v-for用来循环的数组怎么发生变化可以被vue检测到:push、pop、shift、unshift、... ...
目录
(为您整理了一些要点),点击可以直达。这篇“vue中的for循环及自定义指令怎么用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue中的for循环及自定义指令怎么用”文章吧。
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的语法糖,用来从目标元素中查找并且删除这个元素
letitemIndex=this.selectArray.indexOf(selectItem)this.selectArray.splice(itemIndex,1)//删除这个元素this.selectArray.$remove(selectItem)//同样效果,不用查找index
vue不能检测到下面数组的变化:
使用索引设置元素:
this.selectArray[1]='newValue'
解决办法:使用$set方法
修改数据的长度:
this.selectArray.length=0
解决方法:使用空数组来替换:this.selectArray = []
2.使用v-for遍历对象
使用别名
<liv-for="(key,value)inobj">{{key}}-{{value}}</li>
不使用别名,使用$key
<liv-for="valueinobj">{{$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函数})//使用指令<divdirectiveName="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><divclass="demo"><!--value--><pv-color2='purpleUser'><iclass="el-icon-user-solid"></i></p><pv-color2='redUser'><iclass="el-icon-user-solid"></i></p><pv-color2='greenUser'><iclass="el-icon-user-solid"></i></p><!--arg--><pv-color3:[purpleUser]><iclass="el-icon-user-solid"></i></p><pv-color3:[redUser]><iclass="el-icon-user-solid"></i></p><pv-color3:[greenUser]><iclass="el-icon-user-solid"></i></p></div></template><script>exportdefault{data(){return{purpleUser:'purple',redUser:'red',greenUser:'green'}},created(){},methods:{}}</script><stylelange='scss'scoped>p{display:inline-block;font-size:40px;}</style>
参数是静态的,将key的值作为value,改变颜色
main.js
Vue.directive('color',{bind:function(el,binding){constcolor=Object.keys(binding.modifiers)[0];//将key的值作为value,改变颜色,Object.keys获取key的值;el.style.color=color;}})
template.vue中
<template><divclass="demo"><pv-color.purple><iclass="el-icon-user-solid"></i></p><pv-color.red><iclass="el-icon-user-solid"></i></p><pv-color.green><iclass="el-icon-user-solid"></i></p></div></template><script>exportdefault{data(){return{}},created(){},methods:{}}</script><stylelange='scss'scoped>p{display:inline-block;font-size:40px;}</style>
以上的方法,最终实现效果是一样的。
以上就是关于“vue中的for循环及自定义指令怎么用”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。
vue中的for循环及自定义指令怎么用的详细内容,希望对您有所帮助,信息来源于网络。