<!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. u-boot.cfg转eclipse_xml小脚本

    手动复制粘贴版本 cat u-boot.cfg | awk '{if(length($3)){$3 = substr($0, length($1)+length($2)+3); gsub(" ...

  2. centos7 最小化安装后的配置优化

    echo #CENTOS7echo #1.最小化安装之后需要做的事echo 2.配置echo 2.1 安装网络yum install net-tools -y echo 2.2 更新机器名echo h ...

  3. NGUI制作 《九宫格》 图片

    什么是九宫格图片? 就是一张图片的上下左右四个角是固定的,无论X/Y被拉伸多大,图片都不会失真 效果图 ------> 那在NGUI里面怎么做到呢 1 首先你要把图片添加到NGUI图集里,点击E ...

  4. 【二分+SPFA】修建道路(road)

    (四五年以前的老草稿,作为强迫症还是发布出来吧) 修建道路(road.pas/c/cpp) [问题描述] NOIP2012的参赛者LG异想天开打算修建一条磁悬浮列车的通道连接现代OI王国的首都(编号为 ...

  5. javaWeb 使用线程池+队列解决"订单并发"问题

    解决方式:使用线程池+队列 项目基于Spring,如果不用spring需要自己把 ThreadPoolManager.java 改成单例模式 1.写一个Controller(Spring mvc) / ...

  6. 对于近阶段公司代码 review 小结

    来新公司,给公司的SDK review了一下.发现了不少小问题,在此总结一下. (我下面说明问题可能是很简单,但是搞清楚某些问题还是花了些时间的,大家引以为戒吧) 先谈谈处理的问题: 1.某天QA说有 ...

  7. session与cookie的详解

    在PHP面试中 经常碰到请阐述session与cookie的区别与联系,以及如何修改两者的有效时间. 大家都知道,session是存储在服务器端的,cookie是存储在客户端的,session依赖于c ...

  8. CSS Fonts（字体）

    CSS Fonts(字体) 一.serif和sans-serif字体之间的区别 注意: 在计算机屏幕上,sans-serif字体被认为是比serif字体容易阅读. 二.CSS字型 在CSS中,有两种类 ...

  9. iframe自适应高度(兼容多种浏览器)

    http://jingyan.baidu.com/article/b87fe19eaeb2cf5218356896.html 让iframe自适应高度,下面是实现的源码: <div id=&qu ...

  10. logstash运输器以及kibana的更多操作

    为了达到不会因为ELK中的某一项组件因为故障而导致整个ELK工作出问题,于是 将logstash收集到的数据存入到消息队列中如redis,rabbitMQ,activeMQ或者kafka,这里以red ...