Vue 总结 属性绑定
Posted nice2018
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 总结 属性绑定相关的知识，希望对你有一定的参考价值。
一.V-on： 缩写@
绑定事件监听器
<button v-on:click="doThis"></button>
on后面接着就是事件
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
二. v-bind 缩写：（就一个冒号）
<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
<!-- 内联字符串拼接 -->
<img :src="‘/path/to/images/‘ + fileName">
用对象绑定class
:class="{red:isactive}"
用isactive的 布尔值来判断，可以写一个事件动态操作这个布尔值
五.ref
<input ref="usernameInput"></input>
this.$refs.usernameInput.value 可以访问上个input的内容
以上是关于Vue 总结 属性绑定的主要内容，如果未能解决你的问题，请参考以下文章