<!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. Android使用AOP

    这里不讲aop的概念,网上资料很多,这里只讲如何配置aop和自定义plugin. 1.使用场景 在android中,有些业务是公共的,例如:登录判断.获取权限.网络判断等一些公用的业务逻辑,这些都可以 ...

  2. SqlSession对象之Executor

    Executor是Mybatis的一个核心接口,每一个SqlSession对象都会拥有一个Executor(执行器对象):这个执行对象负责[增删改查]的具体操作,我们可以简单的将它理解为JDBC中St ...

  3. 大数据java基础day01

    day01笔记 1.==操作符和equals方法 equals方法存在于Object类中,所有类的equals方法都继承于Object 2.String类的常用方法 ①.replace()替换字符串 ...

  4. js-权威指南学习笔记21

    第二十一章 多媒体和图形编程 1.为了强制让图片缓存起来,首先利用Image()构造函数来创建一个屏幕外的图片对象,之后将该对象的src属性设置成期望的URL. 2.由于各家浏览器制造商未能在对标准音 ...

  5. Django工程的建立以及小网站的编写

    这篇博文会详细的介绍如何创建django工程,介绍我如何做了第一个网站.本文基于windows7安装了python2.7.12,Django1.8.18(LTS)版.采用的IDE为pycharm.建议 ...

  6. Java String 和JSON转换

    Java项目中经常会使用到JSON格式和String格式的数据,所以二者之间的转换也是一个重要的步骤. Sting类型的数据.如: 转化为JSONObject的步骤如下: 1).把字符串转成 JSON ...

  7. ubutu强制关闭应用程序的方法

    1.打开终端,输入命令 top 2.查看应用程序PID号,比如是8080 3.然后终端输入 kill 8080 ,行了

  8. 你真的理解PeopleSoft的Web概要（web profile）嘛

    Web概要通过配置门户相关属性来控制门户的所有行为. 在PS系统中可以创建多个web概要,你可以通过不同的web概要来让用户路由到一个特定的web概要来控制超时,外观,缓存设置等.例如,通过Peopl ...

  9. 研发环境 chrome谷歌浏览器和firefox火狐浏览器解决跨域问题

    1 火狐浏览器 (1).先在地址栏输入about:config,然后单击“我了解此风险”. (2).找到security.fileuri.strict_origin_policy,然后在值下面的tru ...

  10. 用php和ajax写一个省市区的三级联动，实现地区的下拉选择

    要实现这个页面的三级联动,我们需要建立三个php文件,第一个php文件我们导入jQuery文件,里面嵌入JavaScript:第二个php文件我们做一个php的处理页面,里面引入我们封装好的数据库类文 ...