<!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 渲染的动态选项）的更多相关文章

  1. vue 表格中的下拉框单选、多选处理

    最近在用vue做前后端分离,需要在表格中用到下拉框,由于需求变动,从最开始的单选变为多选,折腾了许久,记录一下,供后人铺路 vue 中的表格下拉框单选 collectionsColnumOptions ...

  2. Vue表单控件绑定

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

  3. Vue学习笔记之表单绑定输入

    vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V ...

  4. vue表单输入的绑定

    vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V ...

  5. vue 表单输入与绑定 v-model

    vue使用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.下面我们通过示例先了解下基本用法: &l ...

  6. vue表单选项框

    选项框选的内容在下面显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  7. vue -- v-model 表单绑定

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. vue基础-动态样式&表单绑定&vue响应式原理

    动态样式 作用:使用声明式变量来控制class和style的值 语法: :class/:style 注意:尽可能不要把动态class和静态class一起使用,原因动态class起作用的时间会比较晚,需 ...

  9. html基本标签表单实现交互原理，单选框，复选框，下拉框介绍

    表单是什么?表单是前端和服务器做交互的一种机制,表单收集用户输入信息,之后发送或者提交给服务器.用户在输入的信息称之为内容,内容的文本分为普通和密码型,用户通过单选框.复选框.下拉框(也就是下拉菜单) ...

随机推荐

  1. 排序算法(8)--Merge Sorting--归并排序--Merge sort--归并排序

    1.基本思想  归并排序是建立在归并操作上的一种有效的排序算法,该算法是采用分治法(Divide and Conquer)的一个非常典型的应用.将已有序的子序列合并,得到完全有序的序列:即先使每个子序 ...

  2. AngularJS图片上传功能实践

    逻辑理清楚了:service提供FileReader函数,directive提供点击事件的绑定和监听,controller用来修改html上的ng-src属性值 1.HTML <input ty ...

  3. iOS设计模式－原型模式

    | 导语 定义:用原型实例指定创建对象的种类,并通过拷贝这些原型创建新的对象. 通过深复制(克隆.拷贝)一个指定类型的对象来创建更多同类型的对象.这个指定的对象可被称为“原型”对象,也就是通过复制原型 ...

  4. linux svn配置与使用

      svn错误码对照表: http://docs.sharpsvn.net/current/html/T_SharpSvn_SvnErrorCode.htm   https://www.cnblogs ...

  5. windows 远程连接

    * 方法1:windows自带的远程工具 缺点:如果操作系统是家庭版,会一致连接不上:尽管想办法把这个功能打开: 步骤: * 打开允许远程连接: 点进去自己设置就行,没有什么好说的 设置完之后,需要允 ...

  6. centos6.5安装mysql

    1.yum -install  mysql mysql-server -y 2.修改mysql的root的密码 登录:mysql -uroot        修改密码:            use ...

  7. MySQL常用查询语句积累

    >>MySQL某列插入递增值 SET @i := 100; UPDATE auge_item_classification SET c_code=(@i:=(@i+1)); >> ...

  8. python2与python3的区别（持续更新）

    1,print(打印),python2不换行可以使用逗号,python3不换行使用end='' python2版本: print 'a' 输出一个字符串 print a 输出一个变量 print 'a ...

  9. SQL Server 合并复制遇到identity range check报错的解决 （转载）

    最近帮一个客户搭建跨洋的合并复制,由于数据库非常大,跨洋网络条件不稳定,因此只能通过备份初始化,在初始化完成后向海外订阅端插入数据时发现报出如下错误: Msg 548, Level 16, State ...

  10. jboss-as- 7.1.1.Final配置jndi数据源

    初次使用jboss7.1.1.final部署项目,遇到了很多困难,最终通过查看官方文档和网上资料得以解决,特此记录一下. error information 2016-05-12 12:53:20 J ...