zoukankan      html  css  js  c++  java
  • No.4一步步学习vuejs之表单输入绑定

    基础用法

    你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖,它负责监听用户的输入事件以更新数据,并特别处理一些极端的例子

    绑定到文本

    <div id = "demo4">
    <input v-model="message" placeholder="edit me">
    <p>Message is {{message}}</p>
    </div>
    
    <script>
    var vm=new Vue({
    el:"#demo4",
    data:{
    message:''
    }
    })
    </script>
    <div id = "demo4">
    <p>Mutiple message is</p>
    <p style="white-space: pre-line;">{{ message }}</p>
    <br>
    <textarea v-model="message" placeholder="add multiple lines">11</textarea>
    </div>
    
    <script>
    var vm=new Vue({
    el:"#demo4",
    data:{
    message:''
    }
    })
    </script>



    绑定到多行文本
    注意
    input标签改为textarea标签

    运行结果如下

    复选框

    • 单个复选框 样例
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checked>"></label>
    • 多个复选框

    其实就是多几个单选的标签而已

    div id="demo7">
    <input type="checkbox" id="jack" value="Jack" v-model ="checkNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="clay" value="Clay" v-model ="checkNames">
    <label for="clay">Jack</label>
    <input type="checkbox" id="scott" value="Scott" v-model ="checkNames">
    <label for="scott">Jack</label>
    <br>
    <span>
    CheckedNames are:{{checkNames}}
    </span>
    </div>
    
    
    <script>
    new Vue({
    el:"#demo7",
    data:{
    checkNames:[]
    }
    })
    </script>


    其实就是把type 中的checkbox改成radio即可
    单选按钮

    选择列表

    <div id="example-5">
      <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <span>Selected: {{ selected }}</span>
    </div>
    new Vue({
      el: '...',
      data: {
        selected: ''
      }
    })


  • 相关阅读:
    一个MMORPG的常规技能系统
    as3.2版本中中jar生成方法
    lua中的weak table
    lua中使用table实现类和继承
    Javascript-设计模式_代理模式
    Javascript-设计模式_职责链模式
    Javascript-设计模式_策略模式
    前端安全第四期
    前端安全第三期
    前端安全第二期
  • 原文地址:https://www.cnblogs.com/arsense/p/8428226.html
Copyright © 2011-2022 走看看