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 相关文章推荐
分享14个很酷的jQuery导航菜单插件
Apr 25 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 Javascript
浅析JavaScript基本类型与引用类型
May 28 Javascript
javascript实现图片上传前台页面
Aug 18 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
Nov 17 Javascript
js 点击a标签 获取a的自定义属性方法
Nov 21 Javascript
angularjs中ng-attr的用法详解
Dec 31 Javascript
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
Three.js基础学习之场景对象
Sep 27 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
Dec 07 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
详解vue文件中使用echarts.js的两种方式
Oct 18 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
MySQL修改密码方法总结
2008/03/25 PHP
PHP 常用函数库和一些实用小技巧
2009/01/01 PHP
PHP得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
PHP中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
php给数组赋值的实例方法
2019/09/26 PHP
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
js不能跳转到上一页面的问题解决方法
2013/03/01 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
如何在Linux上安装Node.js
2016/04/01 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
详谈表单格式化插件jquery.serializeJSON
2017/06/23 jQuery
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
javascript实现评分功能
2020/06/24 Javascript
原生javascript如何实现共享onload事件
2020/07/03 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
Python实现约瑟夫环问题的方法
2016/05/03 Python
关于Python数据结构中字典的心得
2017/12/04 Python
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
详解Python_shutil模块
2019/03/15 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
Python错误的处理方法
2020/06/23 Python
苹果中国官方网站:Apple中国
2016/07/22 全球购物
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
2014年信用社工作总结
2014/11/25 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
人民币使用说明书
2019/04/17 职场文书
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
Moment的feature导致线上bug解决分析
2022/09/23 Javascript