zoukankan      html  css  js  c++  java
  • Vue指令之`v-model`和`双向数据绑定

     v-bind 只能实现数据的单向绑定,从 M 自动绑定到 V, 无法实现数据的双向绑定
    <input type="text" v-bind:value="msg" style="100%;">
     使用  v-model 指令,可以实现 表单元素和 Model 中数据的双向数据绑定 
    注意: v-model 只能运用在 表单元素中
    input(radio, text, address, email....)   select    checkbox   textarea
        <div class="box">
          <input type="text" v-model="xx">
          <input type="button" value="D" @click='show'>
        </div>
        <!-- 使用v-model双向数据绑定之后,在input标签中修改任何信息,data中的值都会改变 -->
        <!-- 可以在浏览器中使用检查元素=> console选项,我们最大的对象window,其中Vue   vm的
        实例也是window的,使用vm.xx  就可以显示信息-->
        <script src="./lib/vue-2.4.0.js"></script>
        <script>
            var vm=new Vue({
                el:'.box',
                data:{
                    xx:'大家都是好学生,爱敲代码,爱学习,爱思考,简直是完美,没瑕疵!'
                },
                methods:{
                    show(){
                        alert(this.xx);
                    }
                }
                
    
            });
  • 相关阅读:
    STM32 ~ J-LINK V8 修复
    转移文件
    linux
    STM32 ~ MDK环境下调试程序 HardFault_Handler 相关
    HR_ROS 节点信息
    STM32 ~ 串口DMA通道查找
    CodeBackUP_node_find_serial
    Java问题排查工具箱[转载]
    JDK1.7 ConcurrentHashMap 源码浅析
    JDK1.7 HashMap 源码分析
  • 原文地址:https://www.cnblogs.com/xiaowie/p/11572849.html
Copyright © 2011-2022 走看看