vue 双向数据绑定

<template>

<div id="app">

<h2>{{msg}}</h2>

<!--改变输入框的值的同时改变msg的值-->

<input type="text" v-model='msg' />

<!--添加按钮，点击按钮触发getMsg()事件，getMsg()需要填写在methods :{}里-->

<button v-on:click="getMsg()">获取表单信息</button>

<button v-on:click="setMsg()">设置表单信息</button>

<hr>

<br>

<input type="text" ref="userinfo"/>

<button v-on:click="getInputVaue()">获取第二个表单里面的数据 </button>

 

</div>

</template>

 

<script>

//双向数据绑定 MVVM

//model改变影响视图，视图改变影响 model

//双向数据绑定必须在表单里面使用

 

export default {

data () { /*业务逻辑里面定义的数据 */

return {

msg: 'hello',

}

}, methods :{/*放方法的地方 */

getMsg(){

//方法里面获取data里面数据

alert(this.msg)

},setMsg(){

this.msg="我是改变后的数据"

},getInputVaue(){

//获取ref定义的dom节点

console.log(this.$refs.userinfo);

alert(this.$refs.userinfo.value)；

}

 

}

}

</script>

 

<style land="scss">

.red{

color:red;

}

.blue{

color:blue;

}

 

.box{

height:100px;

width:100px;

background: red;

}

</style>