在vue中 各项指令与函数的结合使用 (v-if、v-show、v-html等)
在开发过程中,我们会遇到v-if需要判断的条件很多,或者v-html的数据需要修改、拼接等情况。
当遇到类似情况时,可以在双引号中调用一个函数,将需要操作的数据作为参数传入函数内,在函数中对该数据进行操作或判断。
<div v-if="checkInfo()">
<p v-html="checkMsg(msg)"></p>
</div>
data () {
return {
msg: '这是一条-测试-数据',
showInfo: false,
num: msg.length
}
},
methods: {
checkInfo () {
return this.showInfo && this.num > 5
},
checkMsg (msg) {
return msg.replace(/\-/g,'')
}
}
同时,这种方法还可以用来生成id选择器
<ul>
<li v-for="(item, index) in list" :key="index" :id="setId(index)"><li>
</ul>
data () {
return {
list:[1,2,3,4,5,6]
}
},
methods: {
setId (index) {
// 参数建议以索引为基础,但非必须。 以索引为基础可以避免id选择器重复命名
return 'newId-' + index
}
}
以上为最近工作中用到的知识,供各位参考。
如有错误,欢迎指正。