静下心，抄一段sample，以后可以快点到这里来抄。。。：

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title></title>
      <link rel="stylesheet" href="demo.css" />
  </head>
  <body>
  <div id="app">
    <input type="text" v-model="message" />
    <span>Your input is: {{ message }}</span>
    <p></p>

    <label><input type="radio" value="male" v-model="gender">男</label>
    <label><input type="radio" value="female" v-model="gender">女</label>
    <p>{{gender}}</p>

    <input type="checkbox" v-model="checked" />
    <span> checked:　{{checked}}</span>
    <p></p>

    <label><input type="checkbox" value="1" v-model="multiChecked">1</label>
    <label><input type="checkbox" value="2" v-model="multiChecked">2</label>
    <label><input type="checkbox" value="3" v-model="multiChecked">3</label>
    <p>multiChecked: {{multiChecked.join('|')}}</p>

    <select v-model="selected">
      <option selected>A</option>
      <option>B</option>
      <option>C</option>
      <option>D</option>
    </select>
    <span> Selected:　{{selected}}</span>
    <p></p>

    <select v-model="multiSelected" multiple>
      <option selected>A</option>
      <option>B</option>
      <option>C</option>
      <option>D</option>
    </select>
    <span> MultiSelected:　{{multiSelected.join('|')}}</span>
    <p></p>

    <input type="checkbox" v-model="checked" v-bind:true-value="a" v-bind:false-value="b">
    <span> checked:　{{checked}}</span>
    <p></p>

    <input type="radio" v-model="checked" v-bind:value="a">
    <span> checked:　{{checked}}</span>
    <p></p>

    <select v-model="selected">
      <option v-bind:value="{number: 123}"> 123</option>
    </select>
    <span> Selected:　{{selected}}</span>
    <p></p>

    <div class="tab" v-bind:class="{'active': active, 'unactive': !active}">
    </div>

    <div v-bind:class="[classA, classB]"></div>

    <div v-bind:style="alertStyle"></div>

  </div>
  <template v-if="yes">
    <p>This is 1 dom</p>
    <p>This is 2 dom</p>
    <p>This is 3 dom</p>
    <p>This is 4 dom</p>
  </template>

  </body>
  <script src="http://cdn.bootcss.com/vue/2.2.4/vue.min.js"></script>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        message: "",
        gender: "",
        checked: "",
        multiChecked: [],
        selected: "",
        multiSelected: [],
        a: "a",
        b: "b",
        yes: true,
        active: true,
        classA: 'class-a',
        classB: 'class-b',
        alertStyle: {
          color: "red",
          fontSize: "20px"
        }
      }

      })
  </script>
</html>

vue.js 2的表单控件的更多相关文章

  1. Vue.js学习笔记——表单控件实践

    最近项目中使用了vue替代繁琐的jquery处理dom的数据更新,个人非常喜欢,所以就上官网小小地实践了一把. 以下为表单控件的实践,代码敬上,直接新建html文件,粘贴复制即可看到效果~ <! ...

  2. Vue.js学习 Item9 – 表单控件绑定

    基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些 ...

  3. Vue 监视数据总结 && 表单控件使用总结

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  4. vue.js基础知识篇(3):计算属性、表单控件绑定

    第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...

  5. Vue.js学习笔记 第七篇 表单控件绑定

    本篇主要说明表单控件的数据绑定,这次没有新的知识点 文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...

  6. Vue表单控件绑定

    前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...

  7. vue表单控件绑定（表单数据的自动收集）

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

  8. vue v-model 表单控件绑定

    v-model 指令在表单控件元素上创建双向数据绑定,下面一一进行示例解释. 1.v-model 双向绑定文本 <!DOCTYPE html> <html> <head ...

  9. vue指令：v-model绑定表单控件；v-model与v-bind结合使用

    一.v-model绑定表单控件 v-model 双向数据绑定:一般用于表单元素,会忽略表单元素的value.checked.selected的初始值,且将Vue实例的数据作为数据来源. 1. 单行文本 ...

随机推荐

  1. django之python3.4及以上连接mysql的一些问题记录

    首先,祭出大杀器whl https://www.lfd.uci.edu/~gohlke/pythonlibs/#mysqlclient django1.x与django2.x 在项目的写法上有一些区别 ...

  2. Java-JNA使用心得

    自上个月20号,历时整整一个月,终于找到工作入职了. 然后这段时间一直看公司的框架还有业务方面的东西.其实由于给分配了一个研究Java调用C语言接口的问题,导致框架业务方面的东西还不熟,然后现在手上又 ...

  3. CF6C Alice, Bob and Chocolate

    CF6C Alice, Bob and Chocolate 题目链接 写了一天搜索写的有点累了,就顺手水了一道CF的模拟题 这道题就是简单的模拟整个题的过程,注意最后输出的形式就好了QWQ AC代码如 ...

  4. 使用Autofac实现依赖注入注入

    依赖注入是什么意思? 依赖倒置 在软件设计原则中,有一种重要的思想叫做依赖倒置.它的核心思想是:不能让高层组件依赖底层组件,而且,不管高层组件和底层组件,两者都应依赖于抽象.那么,这个原则和我们上面的 ...

  5. 【Feasibility of Learning】林轩田机器学习基石

    这一节的核心内容在于如何由hoeffding不等式 关联到机器学习的可行性. 这个PAC很形象又准确,描述了“当前的可能性大概是正确的”,即某个概率的上届. hoeffding在机器学习上的关联就是: ...

  6. Springboot 启动问题

    每次以debug方式启动springboot之后都会在SilentExitExceptionHandler类中的throw new SilentExitException() 解决办法 :window ...

  7. java作业 2017.10.14

    课后作业一 1.设计思想: (1)通过组合数公式计算:分别输入中的n和k的值.定义一个计算n!的方法,然后调用方法分别计算出n!,k!,(n-k)!,然后通过公式=n!/(k!*(n-k)!)算出的值 ...

  8. EXTJS4.0 form 表单提交 后 回调函数 不响应的问题

    在提交表单后,应返回一个 JSON 至少要包含{success:true} 否则,EXT 不知道是否成功,没有响应. {success:true,msg:'成功',Url:'http://www.ba ...

  9. 【bzoj2324】[ZJOI2011]营救皮卡丘 最短路-Floyd+有上下界费用流

    原文地址:http://www.cnblogs.com/GXZlegend/p/6832504.html 题目描述 皮卡丘被火箭队用邪恶的计谋抢走了!这三个坏家伙还给小智留下了赤果果的挑衅!为了皮卡丘 ...

  10. Android M中 JNI的入门学习

    今年谷歌推出了Android 6.0,作为安卓开发人员,对其学习掌握肯定是必不可少的,今天小编和大家分享的就是Android 6.0中的 JNI相关知识,这是在一个安卓教程网上看到的内容,感觉很不错, ...