<!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. POJ3436(KB11-A 最大流)

    ACM Computer Factory Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8133   Accepted: 2 ...

  2. HDU3534(SummerTrainingDay13-C tree dp)

    Tree Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  3. 随手记：tomcat 与JDK 安装与配置

    写了3年的JAVA 每次遇到配置JDK 与按照tomcat的时候都要去网上找一下,太丢人了,所以还是记一下比较好,虽然都知道要配置哪些,但每次都还是有些不确定的感觉~ JDK : 1.安装官网 htt ...

  4. 【代码笔记】iOS-MBProgressHUD+MJ

    一,效果图. 二,工程图. 三,代码. ViewController.m #import "ViewController.h" #import "MBProgressHU ...

  5. 【代码笔记】iOS-自定义选择框（高底强弱）

    一,效果图 二,代码. ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIViewControl ...

  6. 敏捷团队的组织与管理--- MPD软件工作坊培训感想（下）

    注:由麦思博(MSUP)主办的2013年亚太软件研发团队管理峰会(以下简称MPD大会)分别于6月15及6月22日在北京.上海举办,葡萄城的部分程序员参加了上海的会议,本文是参会的一些感受和心得. 今年 ...

  7. 学习笔记（5）——实验室集群LVS监控Web界面配置

    症状:通过虚拟IP能访问到监控页面:http://192.168.253.110/ipvsadm.php,但是却无法读出LVS任务分发及集群负载信息. 打开ipvsadm.php页面,源码如下: &l ...

  8. Nginx的性能优化

    1.优化worker进程个数: 在高并发.高访问量的WEB服务场景,需要事先启动更多的nginx进程,以保证快速响应并处理大量并发用户的请求,优化nginx进程个数的配置项就是,在nginx.conf ...

  9. HCTF2018 pwn题复现

    相关文件位置 https://gitee.com/hac425/blog_data/tree/master/hctf2018 the_end 程序功能为,首先 打印出 libc 的地址, 然后可以允许 ...

  10. MiUI开发者版刷入xposed框架--简洁方法

    一,首先要确定手机是否解锁 可以去这里查看怎么解锁: http://www.miui.com/unlock/index.html 二,手机系统需要是开发者版,且在安全中心的授权管理打开了ROOT授权 ...