<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表单控件处理之使用vue控制select操作文字栏目列表 </title>

    <script src="vue.js"></script>

</head>

<body>

<div id="lantian">

    <div>{{cid}}</div>

    <!--select单选-->

    <!--<select v-model="cid">-->

    <!--select多选-->

    <select v-model="cid" multiple>

        <option value="">请选择栏目</option>

        <!--select单选的时候：-->

        <option v-for="v in category" :value="v.cid">{{v.title}}</option>

    </select>

</div>

<script>

    var app = new Vue({

        el: '#lantian',

        data: {

            category: [

                {cid: 1, title: 'PHP课程'},

                {cid: 2, title: 'HTML课程'},

                {cid: 3, title: 'JAVA课程'},

                {cid: 4, title: 'JQUERY课程'}

            ],

//          cid:3

            cid: []

        }

    });

</script>

</body>

</html>

　　

035——VUE中表单控件处理之使用vue控制select操作文字栏目列表的更多相关文章

  1. 034——VUE中表单控件处理之使用vue控制radio表单的实例操作

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

  2. 031——VUE中表单控件处理之使用vue控制input和textarea表单项

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

  3. 037——VUE中表单控件处理之表单修饰符：lazy/number/trim

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

  4. 036——VUE中表单控件处理之动态绑定文章的属性的处理方法

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

  5. 032——VUE中表单控件处理之复选框的处理

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

  6. Vue表单控件绑定

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

  7. 关于vue.js中表单控件绑定练习

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

  8. Vue#表单控件绑定

    使用v-model 在表单控件上实现数据双向绑定. 单选:https://jsfiddle.net/miloer/bs49p0fx/ <input type="checkbox&quo ...

  9. vue表单控件绑定（表单数据的自动收集）

    v-model指令 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇 但 v-model 本质上不过是语法糖,它负责监听用户的 ...

随机推荐

  1. struts.xml 配置文件的主要元素

    1.package元素 作用: 在struts2的配置文件中引入了面向对象思想.分包管理,易于管理动作类,便于模块化开发动作类. 属性: name:包的名称.名称唯一. extends:一般情况下需要 ...

  2. hdu2825Wireless Password

    地址:http://acm.hdu.edu.cn/showproblem.php?pid=2825 题目: Wireless Password Time Limit: 2000/1000 MS (Ja ...

  3. selenim之ActionChains 用法

    常见的点击方法集锦: 参数: 1.driver是我们的浏览器 2.Actions是我们系统内置的执行鼠标一系列操作的对象 鼠标左击:Actions actions=new Actions(driver ...

  4. oracle过程书写规范

    ORACLE存储过程编码规范 1.1         变量规范 Ø        变量名全部采用小写,局部变量名使用“v_”开头,输入参数以“i_开头,输出参数以“o_”开头,输入输出参数用io_开头 ...

  5. 安装vmware虚拟机和linux（centos）

    打开 WMware Workstation 8,然后选择新建虚拟机 2 新建虚拟机向导 选择 自定义(高级)(C)然后点击[下一步]按钮 3 选择虚拟机硬件兼容性 选择 workstation 8.0 ...

  6. 老话题之C#写邮件发送

    唉!近来特么QQ邮件也犯二,突然间以前写的代码邮件发不出去,各种报错,无奈之下,换成了@163.com,可是报错依然,该开通(POP3/SMTP/IMAP)的都开通了!我勒了个草,像是在玩哥一样,还好 ...

  7. PostgreSQL 递归查询 （转）

    数据库中的数据存在父子关系(单继承,每一条记录只有一个父亲).  如果要查询一条记录以及他的所有子记录,或者要查询一条记录以及他的所有父记录.那么递归查询就再合适不过了.可以简化复杂的SQL语句 现在 ...

  8. SSH三大框架简介

    我们知道,传统的Java Web应用程序是采用JSP+Servlet+Javabean来实现的,这种模式实现了最基本的MVC分层,使的程序结构分为几层,有负责前台展示的 JSP.负责流程逻辑控制的Se ...

  9. 感觉Google要搞事情

  10. webservice的测试案例

    1.服务器端 服务器接口Test_service.java package com.xiaostudy; /** * @desc 服务器接口 * @author xiaostudy * */ publ ...