zoukankan      html  css  js  c++  java
  • vue基础-2

    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>

  • 相关阅读:
    MAVEN 安装与配置
    MAVEN 常用仓库地址
    一些常用的工具
    springFramework 源码学习之源码下载与编译
    测试工程师学习笔记
    什么是多态
    聚簇索引与非聚簇索引
    正则表达式菜鸟教程
    我的第一篇博客
    转Hibernate继承
  • 原文地址:https://www.cnblogs.com/brf-test/p/12032133.html
Copyright © 2011-2022 走看看