标签：vue span name 基础 绑定 tata baby input

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>

标签：vue,span,name,基础,绑定,tata,baby,input
来源： https://www.cnblogs.com/brf-test/p/12032133.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。