<!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. 有关RDD的基础学习1

    1.spark rdd为什么不能嵌套?    譬如 val rdd1=sc.parallel(range(1,100))    val rdd2=sc.parallel(range(1,100))   ...

  2. NodeJS NPM HTTPS

    npm config set registry http://registry.npmjs.org/

  3. JS与JAVA数据类型的区别

    JavaScript与Java数据类型的区别   阅读目录 Number String Boolean Null Undefined Object 今天开始正式认真学习js,虽然在平常j2ee开发中也 ...

  4. 算法+OpenCV】基于opencv的直线和曲线拟合与绘制（最小二乘法）

    http://blog.csdn.net/guduruyu/article/details/72866144 最小二乘法多项式曲线拟合,是常见的曲线拟合方法,有着广泛的应用,这里在借鉴最小二乘多项式曲 ...

  5. RabbitMQ 高级指南

    1 RabbitMQ 简介 1.1 介绍 RabbitMQ 是一个由 erlang 开发的基于 AMQP(Advanced Message Queue)协议的开源实现.用于在分布式系统中存储转发消息, ...

  6. git失败案例

    哈哈哈,git终于能push了,哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 我怀疑是系统版本的问题,之前一直不没能pu ...

  7. SpringBoot集成Mybatis-PageHelper分页工具类，实现3步完成分页

    在Mybatis中,如果想实现分页是比较麻烦的,首先需要先查询出总的条数,然后再修改mapper.xml,为sql添加limit指令. 幸运的是现在已经不需要这么麻烦了,刘大牛实现了一个超牛的分页工具 ...

  8. [Network Architecture]Xception 论文笔记(转)

    文章来源 论文:Xception: Deep Learning with Depthwise Separable Convolutions 论文链接:https://arxiv.org/abs/161 ...

  9. PyTorch源码解读之torchvision.models(转)

    原文地址:https://blog.csdn.net/u014380165/article/details/79119664 PyTorch框架中有一个非常重要且好用的包:torchvision,该包 ...

  10. 【Detection】R-FCN: Object Detection via Region-based Fully Convolutional Networks论文分析

    目录 0. Paper link 1. Overview 2. position-sensitive score maps 2.1 Background 2.2 position-sensitive ...