<template>
<div id="app">
<!-- 双向数据绑定(必须在表单里面使用) m:model v:view mvvm:model改变会影响视图,视图改变会影响model -->
<h2>{{msg}}</h2>
<input type="text" v-model="msg" />
<button v-on:click="getMsg()">获取表单数据get</button>
<button v-on:click="setMsg()">设置表单数据set</button>
<br>
<hr>
<br>
<input type="text" ref="input2" />
<button v-on:click="getMsg2()">获取表单2数据get</button>
<br>
<hr>
<br>
<div ref="box">box</div>
<button v-on:click="getMsg2()">获取表单2数据并改变box字体颜色</button>
</div>
</template> <script>
export default {
data () {/*业务逻辑里面定义的数据*/
return {
msg:'你好,世界',
}
},
methods:{/*方法*/
getMsg(){
alert(this.msg)
},
setMsg(){
this.msg="改变后数据"
},
getMsg2(){
//获取ref定义的dom节点
console.log(this.$refs.input2);
this.$refs.box.style.color = 'red';
alert(this.$refs.input2.value);
}
}
}
</script> <style> </style>