<!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. VM虚拟机克隆_修改网络

    1.如果网络中没有VMware的网卡,记得重置即可 2.如果右上角没有了网络图标,直接 server NetworkManager restart 3.网络配置 1)在/etc/sysconfig/n ...

  2. HDU3001(KB2-J 状态压缩dp)

    Travelling Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  3. CentOS 7环境下Pycharm安装流程记录

    1.准备安装文件: 方法1: 使用内置火狐浏览器访问下载最新格式为tar.gz的压缩包 网址:https://www.jetbrains.com/pycharm/download/previous.h ...

  4. git 本地安装

    一.基本安装 1.下载Git   官方地址为:https://git-scm.com/download/win 2.下载完之后,双击安装,全部选择默认. 3.选择安装目录 4.选择组件 5.开始菜单目 ...

  5. 【代码笔记】iOS-JQIndicatorViewDemo

    一,效果图. 二,工程图. 三,代码. #import "ViewController.h" #import "JQIndicatorView.h" @inte ...

  6. 工作记录（JS向textarea添加固定内容、通过固定字符将字符串分割为数组）

    第一个是在 textarea 输入框中添加固定的内容. 代码如下: <textarea id="text" cols="30" rows="10 ...

  7. SpringMVC—Struts2拦截器学习网址整理

    引自:http://blog.csdn.net/wp1603710463/article/details/49982683 SpringMVC—Struts2拦截器学习网址整理 最近项目中遇到权限相关 ...

  8. Spring Boot系列学习文章(一) -- Intellij IDEA 搭建Spring Boot项目

    前言: 最近做的一个项目是用Spring Boot来做的,所以把工作中遇到的一些知识点.问题点整理一下,做成一系列学习文章,供后续学习Spring Boot的同仁们参考,我也是第一次接触Spring ...

  9. 【Python】插入sqlite数据库

    import sqlite3 from datetime import datetime conn = sqlite3.connect('data.db') print("Opened da ...

  10. Oracle EBS 用户职责人员取值

    SELECT fu.user_name 用户名, fu.description 用户说明, fu.start_date 用户启用日期, fu.end_date 用户终止日期 --,fu.employe ...