Vue双向数据绑定

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

回到顶部