vue中 指令与函数的结合使用

在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
	}
}

以上为最近工作中用到的知识，供各位参考。
如有错误，欢迎指正。