<!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. 003-spring boot项目的项目属性配置

    一.application.properties文件. 1.项目的配置文件内容.配置了端口,超时连接时间, 2.控制器. 3.访问. 二.application.yml文件 1.application ...

  2. XDU 1056

    解法一:简单搜索肯定TLE,只是单纯的想写一发搜索练练手 #include<cstdio> #include<cstring> #define maxn 1005 using ...

  3. MongoDB操作库/表

    假设你已经安装好了MongoDB 不使用权限启动 mongod --fork --bind_ip 0.0.0.0 --dbpath=/mydata/mongo/data --logpath=/myda ...

  4. 20145316许心远《Java程序设计》第4周学习总结

    20145316许心远<Java程序设计>第4周学习总结 教材学习内容总结 6.继承与多态 1．继承共同行为 * 多个类中存在相同属性和行为时,将这些内容抽取到单独一个类中,那么多个类无需 ...

  5. Rsync结合Inotify 实时同步配置（更新之前繁琐的传输认证）

    今天一位CU的友友根据之前介绍过 通过rsync+inotify-tools+ssh实现触发式远程实时同步  配置分发系统,但是由于认证繁琐,很容易出错,我今天重新整理了下,用rsync密码文件pas ...

  6. elasticsearch搜索集群基础架构

    1.  elasticsearch cluster搭建 http://www.cnblogs.com/kisf/p/7326980.html   为了配套spring boot,elasticsear ...

  7. Nginx配置location跳转后偶尔出现404

    tv.xxx.com/voice请求时需跳转至:tv.xxx.com/zongyi/zt2015/haoshengyin/index.shtml 目录结构: nginx服务器配置: location ...

  8. 一键安装lnmp（1）

    #!/bin/bash#author:zhaocl#Software directory:$pathpath=`pwd`cd $path. $path/cacti.sh. $path/nginx.sh ...

  9. Topic与Queue

    总结自:https://blog.csdn.net/qq_21033663/article/details/52458305 队列(Queue)和主题(Topic)是JMS支持的两种消息传递模型: 1 ...

  10. 20145211《网络渗透》MS12-004漏洞渗透

    20145211<网络渗透>MS12-004漏洞渗透 一 实验原理 初步掌握平台matesploit的使用 有了初步完成渗透操作的思路 在这里我选择对的不是老师推荐的MS11_050,而是 ...