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 学习笔记(十三)Dom创建表格
Jan 21 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
Oct 11 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
基于AngularJS前端云组件最佳实践
Oct 20 Javascript
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
Angular2开发环境搭建教程之VS Code
Dec 15 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 12 Javascript
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
微信小程序封装的HTTP请求示例【附升级版】
May 11 Javascript
js+cavans实现图片滑块验证
Sep 29 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实现取得HTTP请求的原文
2014/08/18 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
html读出文本文件内容
2007/01/22 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
vue服务端渲染缓存应用详解
2018/09/12 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
如何用Python来搭建一个简单的推荐系统
2019/08/07 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
Canvas波浪花环的示例代码
2020/08/21 HTML / CSS
安踏官方商城:anta.cn
2019/12/16 全球购物
小区门卫值班制度
2014/01/24 职场文书
展会邀请函范文
2014/01/26 职场文书
学习十八大报告感言
2014/02/04 职场文书
怀念母亲教学反思
2014/04/28 职场文书
社会公德演讲稿
2014/05/20 职场文书
法制宣传标语集锦
2014/06/25 职场文书
党支部三会一课计划
2014/09/24 职场文书
承租经营合作者协议书
2014/10/01 职场文书
中国汉字听写大会观后感
2015/06/02 职场文书
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python