<!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. Codeforces729D(SummerTrainingDay01-F)

    D. Sea Battle time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  2. 【读书笔记】iOS-网络-负载

    负载指的是在服务的请求响应事务中交换的数据.常见的负载格式包括XML,JSON与HTML. 进入与发出的负载数据存在很多形式与大小.比如,有些开发者会使用原生的字符串或是以分隔符分开的数据与Web S ...

  3. Intellij idea Cannot start internal HTTP server.

    错误提示:Cannot start internal HTTP server. Git integration, JavaScript debugger and LiveEdit may operat ...

  4. 转 Fira Code | 为写程序而生的字体

    原文:Fira Code | 为写程序而生的字体 Fira Code | 为写程序而生的字体 己短不可藏 6月前 · 1199 人阅读 关注TA 程序员福利!!!今天为大家带来一个专为程序员写程序设计 ...

  5. SD从零开始03-04

    [原创]SD从零开始3 SD中的主数据 客户主数据Customer master(分层维护) 一般数据general data: 与销售和财务都有关,对所有的组织单元有效: 销售区域数据sales a ...

  6. The D Programming Language 书评

    此书的作者 Andrei Alexandrescu 作为前 C++ 社区的一朵奇葩,因为实在是不满 C++ 标准委员会的官僚作风,跳槽到了 D 社区,成为了 D 发明人 Walt Brightman ...

  7. 自定义适用于手机和平板电脑的 Dynamics 365(三)：显示的实体

    您可以启用 适用于手机的 Dynamics 365 和 适用于平板电脑的 Dynamics 365 的有限实体集. 若要查看是否启用了实体,或者要启用实体,请单击“设置”>“自定义”>“自 ...

  8. C语言目录

    软件行业的很多细分学科都是都是基于C语言的,学习数据结构.算法.操作系统.编译原理等都离不开C语言. PHP.Python 等都是用C语言开发出来的,虽然平时做项目的时候看不到C语言的影子,但是如果想 ...

  9. How to add hyperlink in JLabel

    You can do this using a JLabel, but an alternative would be to style a JButton. That way, you don't ...

  10. 在servlet中用spring @Autowire注入Bean

    在servlet中新增init方法: public void init(ServletConfig config) { super.init(config); SpringBeanAutowiring ...