Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)


Posted in Javascript onMay 13, 2019
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue表单绑定(单选按钮,选择框(单选时,多选时)</title>
  </head>
  <body>
    <!-- 单选按钮 -->
    <div id="app">
      <input type="radio" value="选择1" v-model="radio"/>
      <label>选择1</label>
      <input type="radio" value="选择2" v-model="radio"/>
      <label>选择2</label>
      <p>所选择:{{radio}}</p>
    </div>
    
    <!-- 选择框(单选时) -->
    <div id="app1">
      <select v-model="select">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <p>所选择:{{select}}</p>
    </div>
<!-- 用 v-for 渲染的动态选项 -->
    <div id="app2">
      <select v-model="select">
        <option v-for="item in list" v-bind:value="item.id">{{item.name}}</option>
      </select>
      <p>所选择:{{select}}</p>
    </div>
    <script src="vue.js"></script>
    <script>
      //单选按钮
      var app=new Vue({
        el:"#app",
        data:{
          radio:"选择1"
        }
      });
      
      //选择框(单选时)
        var app=new Vue({
        el:"#app1",
        data:{
          select:""
        }
      });
//用 v-for 渲染的动态选项
      var app2 = new Vue({
        el: "#app2",
        data: {
          select: '1',
          list: [{
              id: 1,
              name: 'A'
            },
            {
              id: 2,
              name: 'B'
            },
            {
              id: 3,
              name: 'C'
            }
          ],
        }
      })
    </script>
  </body>
</html>

选择框(多选时):只需要把select:[]  即可,并且添加multiple;

总结

以上所述是小编给大家介绍的Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript window.setTimeout() 的详细用法
Nov 04 Javascript
javascript 四则运算精度修正函数代码
May 31 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
Jul 14 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
Javascript中的包装类型介绍
Apr 02 Javascript
JavaScript中的getTime()方法使用详解
Jun 10 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 Javascript
RequireJS使用注意细节
May 15 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 Javascript
解决vue项目中出现Invalid Host header的问题
Nov 17 Javascript
JavaScript封闭函数及常用内置对象示例
May 13 #Javascript
vue 表单之通过v-model绑定单选按钮radio
May 13 #Javascript
JS中的函数与对象的创建方式
May 12 #Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 #Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
May 12 #Javascript
浅谈vue.use()方法从源码到使用
May 12 #Javascript
Vue安装浏览器开发工具的步骤详解
May 12 #Javascript
You might like
php命名空间学习详解
2014/02/27 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(三)
2014/06/23 PHP
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
Javascript Math ceil()、floor()、round()三个函数的区别
2010/03/09 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
百度移动版的url编码解码示例
2014/04/29 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
详解vue 不同环境配置不同的打包命令
2019/04/07 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
JavaScript Blob对象原理及用法详解
2020/10/14 Javascript
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
python创建列表并给列表赋初始值的方法
2015/07/28 Python
python 爬虫 批量获取代理ip的实例代码
2018/05/22 Python
在python中按照特定顺序访问字典的方法详解
2018/12/14 Python
Django forms表单 select下拉框的传值实例
2019/07/19 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
python和php哪个容易学
2020/06/19 Python
python2和python3哪个使用率高
2020/06/23 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
班长自荐书范文
2014/02/11 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
全国助残日活动总结
2015/05/11 职场文书
2016年优秀少先队员事迹材料
2016/02/26 职场文书
springboot入门 之profile设置方式
2022/04/04 Java/Android