vue 修饰符

表单修饰符

vue 中的表单修饰符有：number、trim、lazy

• number 将输入框内的字符转为数字
• trim 将输入框内中前后的空格去掉
• lazy 将输入框的值与数据转变在 change 事件中同步

number 修饰符

vue 中 number 修饰符的作用是将输入框内的字符串转换成数字

<input v-model.number="number">
<p @click="showMsg">{{ number }}</p>
<script>
methods: {
	showMsg: function() {
		console.log(this.number)
		console.log(typeof(this.number))
	}
}
</script>

trim 修饰符

vue 中 trim 修饰符的作用是将输入框内中前后的空格去掉

<input v-model.trim="search_text">
<p v-on:click="showContent"> {{ search_text }}</p>
<script>
showContent: function() {
	console.log( "a" + this.search_text)
}
</script>

lazy 修饰符

在 change 而非 input 时更新

<input v-model.lazy = 'msg'>
<span> {{msg}} </span>
<script>
	new Vue({
		el:'#app',
		data:{
			msg:'lazy'
		}
	})
</script>

事件修饰符

.stop：等同于 js 中的 event.stopPropagation()，防止事件冒泡，阻止事件传播
.prevent：等同于js中的 event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播），阻止事件（超链接）默认行为
.capture：与事件冒泡的方向相反，事件捕获
.self：只会触发自己范围内的事件，不包含子元素（事件目标对象是自己，才会触发）
.once：只会触发一次