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评估用户输入密码的强度实现代码
Nov 30 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
Aug 08 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
jQuery基于ID调用指定iframe页面内的方法
Jul 06 Javascript
Vue 表单控件绑定的实现示例
Aug 11 Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
React Component存在的几种形式详解
Nov 06 Javascript
vue 实现特定条件下绑定事件
Nov 09 Javascript
vue的三种图片引入方式代码实例
Nov 19 Javascript
JavaScript使用prototype属性实现继承操作示例
May 22 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中SimpleXML函数用法分析
2014/11/26 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
PHP的几个常用加密函数
2016/02/03 PHP
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
微信小程序 检查接口状态实例详解
2017/06/23 Javascript
Vue2几种常见开局方式详解
2017/09/09 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
python操作xml文件示例
2014/04/07 Python
Windows下PyMongo下载及安装教程
2015/04/27 Python
总结Python编程中函数的使用要点
2016/03/20 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
在python中用url_for构造URL的方法
2019/07/25 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
Python递归函数特点及原理解析
2020/03/04 Python
python字典key不能是可以是啥类型
2020/08/04 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
金融专业毕业生推荐信
2013/11/26 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
希特勒经典演讲稿
2014/05/19 职场文书
公司担保书范文
2014/05/21 职场文书
土地转让协议书
2014/09/27 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
小学班级标语口号大全
2015/12/26 职场文书
Python入门学习之类的相关知识总结
2021/05/25 Python