Vue双向数据绑定
v-model:双向数据绑定必须在表单中使用,input,select等
v-on:click 简写 @click :事件绑定,方法放到methods中
ref="userInfo" : 给标签设置ref属性,可在js中通过this.$refs获取到相应dom节点
this.$refs.userInfo:可以获取到dom节点,之后可获取dom 的值,也可以设置dom 的style等属性
<template><div id="app">
<div>
{{msg}}
<br>
<input v-model="msg" ref="info">
<button v-on:click="getMsg()">获取msg</button>
<button @click="setMsg()">设置msg</button>
<button @click="getRef()">通过$refs获取值</button>
<button @click="setRef()">通过$refs设置属性</button>
</div>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
msg: "Hello Vue"
};
},
methods: {
getMsg() {
alert(this.msg);
},
setMsg(){
this.msg="新值";
},
getRef(){
alert(this.$refs.info.value)
},
setRef(){
this.$refs.info.style.color="red";
}
}
};
</script>
<style lang="scss">
.red {
color: red;
}
.redA {
background: red;
}
</style>
以上是 Vue双向数据绑定 的全部内容, 来源链接: utcz.com/z/379635.html