vue基础-2

Posted 2021-03-23 brf-test

v-model  双向数据绑定

• input文本

定义name=tata，通过v-model绑定name

首先输入框里展示的name是tata，span标签展示的也是tata，当修改input输入框的数据时，span标签里的tata也会跟着变化，这属于单项绑定。

此时我又通过一个button绑定了click事件，点击修改按钮调用change方法时name变成baby，此时改变的是name这个变量，input框和span标签展示的都是baby。

修改input框的内容时，name这个变量会跟着改变，修改name变量时，input框中的内容也会改变，这就属于双向数据绑定

<div id="app">
        <span>span--->{{name}}</span><br>
        <!--v-model 双向数据绑定  input-->
        <input type="text" v-model="name">
        <input type="button" @click="change" value="修改">
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
    // 元素
    el:‘#app‘,
    // 数据源
    data:{
       name:‘tata‘,
    },
    // 方法
    methods:{
        change() {
            this.name = ‘baby‘;
        }
    }
})
</script>