<!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. hdu6162 Ch’s gift

    地址:http://acm.split.hdu.edu.cn/showproblem.php?pid=6162 题目: Ch’s gift Time Limit: 6000/3000 MS (Java ...

  2. The 15th UESTC Programming Contest Preliminary B - B0n0 Path cdoj1559

    地址:http://acm.uestc.edu.cn/#/problem/show/1559 题目: B0n0 Path Time Limit: 1500/500MS (Java/Others)    ...

  3. Python3.x：pytesseract识别率提高（样本训练）

    Python3.x:pytesseract识别率提高(样本训练) 1,下载并安装3.05版本的tesseract 地址:https://sourceforge.net/projects/tessera ...

  4. MR案例：分区和排序

    现有一学生成绩数据,格式如下:<学号,姓名,学院,成绩>  //<id, name, institute, grade>. 需求描述:查询成绩大于等于60分的学生数据,按学院分 ...

  5. Centos7服务器搭建VNC Server环境

    在企业级项目的开发中,尤其是分布式项目,经常直接在服务器上进行开发工作,操作系统环境一般是Centos 7.普遍状况是,在服务器上安装IDE 开发工具,通过 Xshell等工具远程启动,本地通过虚拟桌 ...

  6. PAT1070. Mooncake (25)

    #include #include #include <stdio.h> #include <math.h> using namespace std; struct SS{ d ...

  7. HDU 3594 Cactus（仙人掌问题）

    http://acm.hdu.edu.cn/showproblem.php?pid=3594 题意: 一个有向图,判断是否强连通和每条边只在一个环中. 思路: 仙人掌问题. 用Tarjan算法判断强连 ...

  8. 2018 ICPC北京 H ac自动机

    n=40的01串,求有多少m=40的01串中包含它,包含的定义是存在子串有至多一个字符不相同 600组n=15的数据 15组n=40的数据,所以我们只能支持n^5的算法. 陷入两个比较有意思的坑: 1 ...

  9. 编译libmemcached

    php的扩展memcache,不支持cas,所以我们要装memcached扩展,memcached扩展是基于libmemcached,所以要先安装libmemcached 一.下载软件 1.libme ...

  10. java开发设计六大基本原则

    1.遵循单一职责原则 定义:不要存在多于一个导致类变更的原因.通俗的说,即一个类只负责一项职责.一个类只专注于做一件事: 高内聚,低耦合: 实例: 普通的手表如果有一个指针坏了,那么手表将不再转动,而 ...