1、html

<div id="app-8">
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
</div>

2、script

var app8 = new Vue({
el: '#app-8',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})

Vue select 下拉菜单的更多相关文章

  1. jQuery插件:模拟select下拉菜单

    没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...

  2. vue select下拉框绑定默认值

    vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一.当没有绑定v-model,直接给对应的option加selected属性 二.当 ...

  3. select 下拉菜单Option对象使用add(elements,index)方法动态添加

    原生js 的add函数为下拉菜单增加选项 1.object.add(oElement [, iIndex]) index 可选参数:指定元素放置所在的索引号,整形值.如果没有指定值,将添加到集合的最后 ...

  4. select下拉菜单反显不可改动,且submit能够提交数据

    首先通过后台funcA()将下拉菜单反显不可改动的数据response到disable.jsp页面,disable.jsp: <script> var data1=${result.obj ...

  5. 手写的select 下拉菜单

    我们在进行表单设计时,可能要用到select下拉选项控件,遗憾的是,IE浏览器默认的select控件外观非常丑陋,而且不能用样式来控制,不能在选项中添加图片等信息.今天我将通过实例来讲解如何用CSS和 ...

  6. 使用JQUERY的flexselect插件来实现将SELECT下拉菜单变成自动补全输入框

    这也是下拉列表太长了之后,使用的同事提出来的意见, 然后,本来开始想将DJANGO的那个后台下拉菜单移植过来的,但发现不现实,也麻烦, 就找了几个JQUERY的插件测试了一下,最后选中了flexsel ...

  7. Jquery-操作select下拉菜单

    jQuery获取Select选择的Text和Value: 1. var checkText=jQuery("#select_id").find("option:selec ...

  8. select下拉菜单实现通过数据库查询来设置默认值

    查询网上各种资料要不比较难理解,要么有问题,现有一种简单通俗的理解方法 思路:读取数据库数据1,数据2需用到select选择菜单,但是又想每次查看是都显示读数据库的默认信息 demo: {% for ...

  9. layui select下拉菜单联动

    做的比较简单,先从后台直接把第一级菜单输出,然后点击二级菜单的时候再动态展示 <div class="layui-inline"> <label class=&q ...

随机推荐

  1. API Authentication Error: {"error":"invalid_client","message":"Client authentication failed"}

    解决方法:https://github.com/laravel/passport/issues/221 In your oauth_clients table, do the values you h ...

  2. [case]filesystem problem

    e2fsck -Nov-) fsck.ext4: Superblock invalid, trying backup blocks... fsck.ext4: Bad magic number in ...

  3. python学习(24) 使用Xpath解析并抓取美女图片

    Xpath最初用来处理XML解析,同样适用于HTML文档处理.相比正则表达式更方便一些 Xpath基本规则 nodename 表示选取nodename 节点的所有子节点 / 表示当前节点的直接子节点 ...

  4. Guava之CaseFormat

    com.google.common.base.CaseFormat是一种实用工具类,以提供不同的ASCII字符格式之间的转换. 其对应的枚举常量 从以上枚举中可以看出,java程序员最常用的转换类型为 ...

  5. vue+element 切换正式和测试环境

    1.package.json { "name": "element-starter", "description": "A Vue ...

  6. 关于ARGB_8888、ALPHA_8、ARGB_4444、RGB_565的理解

    关于ARGB_8888.ALPHA_8.ARGB_4444.RGB_565的理解 A:透明度 R:红色 G:绿 B:蓝 Bitmap.Config ARGB_4444:每个像素占四位,即A=4,R=4 ...

  7. Mongodb 笔记02 创建、更新和删除文档

    创建.更新和删除文档          1. 插入并保存: 1). 单条插入,insert : db.foo.insert({"bar":"baz"}) 2). ...

  8. 设置PyCharm中的Python代码模版

    再MacOs运行的PyCharm中,执行python文件,如果不指定python文件字符编码会报错: SyntaxError: Non-ASCII character , but no encodin ...

  9. 洛谷P2424/codevs 2606 约数和

    http://codevs.cn/problem/2606/ https://luogu.lohu.info/problem/show?pid=2424 题目背景 Smart最近沉迷于对约数的研究中. ...

  10. 2015/12/14 Python网络编程,TCP/IP客户端和服务器初探

    一直不是很清楚服务器的定义,对于什么是服务器/客户端架构也只有一个模糊的感觉.最近开始学习,才明白一些什么服务器和客户端的关系. 所谓的服务器,就是提供服务的东西,它是一个硬件或者软件,可以向一个或者 ...