所谓双向绑定:就是改变modle,就会改变view,改变view,也会改变modle
下面案例,点击getMthod(),获取msg的内容,在点击setMthod()改变msg的内容,你会发现H1的值也会进行改变
<template> <div id="app"> <h1>{{ msg }}</h1> <!-- input获取msg的内容,modle的值赋予给view,改变view的值就会更改model的内容, --> <input type="text" v-model="msg"/> <button v-on:click="getMthod()">点击我有效果</button> <button v-on:click="setMthod()">改变view的值</button> <hr> <br> <!-- 使用ref获取表单数据,ref 相当于是一个表达 --> <input type="text" ref="userinfo"/> <br> <div ref="box"> 我是一个颜色</div> <button v-on:click="gettwoframe()">获取第二个表单数据</button> </div> </template> <script> /* 双向数据绑定,用于表单, */ export default { name: 'app', data () { return { msg: 'hello' } },methods:{ getMthod(){ alert(this.msg); },setMthod(){ this.msg="改变后的内容" },gettwoframe(){ //打印ref的值,获取ref定义的dom节点 console.log(this.$refs.userinfo); //使用原生js改变颜色 this.$refs.box.style.backgroud='red'; alert(this.$refs.userinfo.value); } } } </script> <style> h1, h2 { font-weight: normal; } .red{ color:red } .blue{ color:blue } a { color: #42b983; } .box{ width: 100px; height: 100px; background-color: #42b983 }