<!DOCTYPE html>

<html lang="zh">

<head>

    <title></title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <link href="../css/style.css" rel="stylesheet"> </head>

<body>

<div id="myApp">

    <h3>你最喜欢的NBA球星是：</h3>

    <select v-model="likedNBAStar" style="width:210px;">

        <option>科比</option>

        <option>詹姆斯</option>

        <option>哈登</option>

        <option>库里</option>

        <option>杜兰特</option>

    </select>

    <h3>我的全明星：</h3>

    <select v-model="likedNBAStars" multiple style="width:210px;height:210px;">

        <option>阿德托昆博</option>

        <option>怀特赛德</option>

        <option>阿尔德里奇</option>

        <option>戴维斯</option>

        <option>格里芬</option>

        <option>詹姆斯</option>

        <option>杜兰特</option>

        <option>巴特勒</option>

        <option>德罗赞</option>

        <option>哈登</option>

        <option>科比</option>

        <option>韦德</option>

        <option>伦纳德</option>

        <option>库里</option>

        <option>欧文</option>

        <option>保罗</option>

        <option>林树豪</option>

    </select>

    <h3>选择结果</h3>

    <p>我最最喜欢: {{ likedNBAStar }}</p>

    <p>我的全明星: {{ likedNBAStars }}</p>

</div>

<script>

    var myApp = new Vue({

        el: '#myApp',

        data: {

            likedNBAStar: null,

            likedNBAStars: [],

        },

        methods: {

        },

    });

</script>

</body>

</html>

表单下拉框select的更多相关文章

  1. asp.net MVC4 表单 - 下拉框

    1.下拉框代码方式 控制器内构建下拉项目: List<SelectListItem> list = new List<SelectListItem>(); list.Add(n ...

  2. struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input

    原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1     function dosearch() {2         if ($(&q ...

  3. JQuery操作下拉框 select

    要实现这种效果: html代码 1<script src="js/jquery-1.7.2.min.js"></script> 2 <table> ...

  4. 【jQuery获取下拉框select、单选框radio、input普通框的值和checkbox选中的个数】

    radio单选框:name属性相同 <input type="radio" id="sp_type" name="p_type" va ...

  5. 关于jQuery表单下拉selected设置无效的解决方案

    表单下拉选项使用selected设置,发现第一次默认选中成功,在页面不刷新的情况下,再次下拉,selected属性设置了,默认选中不生效 研究发现是浏览器兼容的问题 一,解决浏览器缓存问题,在HTML ...

  6. jQuery对下拉框Select操作总结

    jQuery对下拉框Select操作总结 转自网络,留做备用 jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change( ...

  7. 下拉框select中option居中样式

    下拉框select中option居中样式 text-align:center;text-align-last:center;

  8. 在vue中的form表单中下拉框中的数据来自数据库查询到的数据

    文章目录 1.实现的效果: 2.前端html代码 3.js中的代码 4.后端的方法 1.实现的效果: 增加一个新的类型到数据库 2.前端html代码 需要注意的部分:prop后边是表单中的字段 v-m ...

  9. 吾八哥学Selenium(四)：操作下拉框select标签的方法

    我们在做web页面自动化测试的时候会经常遇到<select></select>标签的下拉框,那么在Python里如何实现去操作这种控件呢?今天就给大家分享一下这个玩法.为了让大 ...

随机推荐

  1. Spring MVC @CookieValue注解（5）

    @CookieValue的作用 用来获取Cookie中的值 @CookieValue参数 1.value:参数名称 2.required:是否必须 3.defaultValue:默认值 @Cookie ...

  2. D3.js(v3)+react 制作 一个带坐标与比例尺的柱形图 (V3版本)

    现在用D3.js + react做一个带坐标轴和比例尺的柱形图.我已经尽力把代码全部注释上了,最后我也会把完整柱形图代码奉上.如果还有疑惑的,可以去翻看一下我之前介绍的方法,以下方法都有介绍到. 还有 ...

  3. META标签的定义与使用（一、HTTP标题信息（http-equiv））

    META标签分两大部分:HTTP标题信息(http-equiv)和页面描述信息(name). 一.http-equiv类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确和精确地显示网页 ...

  4. PHP出现报警后需要修改 date.timezone 的值(php.ini)

    PHP调试的时候出现了警告: It is not safe to rely on the system解决方法,其实就是时区设置不正确造成的,本文提供了3种方法来解决这个问题. 实际上,从PHP 5. ...

  5. Benchmark of Large-scale Unconstrained Face Recognition-blufr 算法的理解

    Many efforts have been made in recent years to tackle the unconstrained face recognition challenge. ...

  6. CF528E Triangles3000

    题意:给你一个不存在三线共交点的一次函数组a[i]x+b[i]y+c[i]=0. 问等概率选取三条直线,围成三角形的面积的期望. n<=3000. 标程: #include<bits/st ...

  7. chrome的驱动安装

    首先找到对应的chromedriver,百度搜索,http://npm.taobao.org/mirrors/chromedriver/ 将下载好的chrome驱动解压,放在/usr/loacl/bi ...

  8. TopCoder[SRM513 DIV 1]:Reflections(1000)

    Problem Statement      Manao is playing a new game called Reflections. The goal of the game is trans ...

  9. CF377D Developing Game

    题目链接: luogu 题目分析: 把每个人当成一个三元组\([l_i, r_i, v_i]\) 考虑每个人对哪个能力区间\([L, R]\)有贡献 应该是左端点在\([l_i, v_i]\),右端点 ...

  10. VS2010-MFC（常用控件：图片控件Picture Control）

    转自:http://www.jizhuomi.com/software/193.html 本节主要讲一种简单实用的控件,图片控件Picture Control.我们可以在界面某个位置放入图片控件,显示 ...