<!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. 斐讯面试记录—三线程交替打印ABC

    package cn.shenzhen.feixun; public class PrintABC extends Thread{ private String name; private Objec ...

  2. hdu3374 String Problem

    地址:http://acm.hdu.edu.cn/showproblem.php?pid=3374 题目: String Problem Time Limit: 2000/1000 MS (Java/ ...

  3. c++之旅:多态

    多态 同一消息根据发送对象的不同而产生不同的行为,多态是建立的在封装和继承的基础之上 一个小案例引发的问题 #include <iostream> using namespace std; ...

  4. python中统计计数的几种方法

    以下实例展示了 count() 方法的使用方法: 1 2 3 4 5 6 # !/usr/bin/python3   T = (123, 'Google', 'Runoob', 'Taobao', 1 ...

  5. 使用svn的过程中check out的文件路径中的文件图标全都加上了“蓝色问号”的解决方案

    (1)你在对同一层目录下创建一个记事本文件,然后把下面这句话复制进去 for /r . %%a in (.) do @if exist "%%a\.svn" rd /s /q &q ...

  6. Linux学习笔记之CentOS6.9 防火墙的关闭以及开启

    有的时候,我们需要对系统的防火墙进行操作,今天小编就给大家讲解一下如何开启以及关闭CentOS6.9系统下的防火墙. 输入:cat /etc/issue   查看版本 (一)通过service命令 s ...

  7. JS对象深入剖析

    对象概述 Objects are mutable keyed collections.  An object is a container of properties, where a propert ...

  8. 爬虫框架Scrapy之Settings

    Settings Scrapy设置(settings)提供了定制Scrapy组件的方法.可以控制包括核心(core),插件(extension),pipeline及spider组件.比如 设置Json ...

  9. C#设计模式之控制反转即依赖注入-Spring.NET

    主流的依赖注入方案:微软企业库中的Unity.Spring.NET.StructureMap.Ninject.Castle Windsor等等. 本章用简单的案例讲解 Spring.NET IOC-控 ...

  10. 独家git clone 加速方法

    git clone 独家方法 最近需要下载网上很多github库,所以git clone 4kb/s 的速度可以把人逼疯,为了加速git clone才有了这篇博客 网上有很多加速的方案 比如 blog ...