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. python的字符串截取

    str = ‘’ :] #截取第一位到第三位的字符 print str[:] #截取字符串的全部字符 :] #截取第七个字符到结尾 ] #截取从头开始到倒数第三个字符之前 ] #截取第三个字符 ] # ...

  2. web中的懒加载

    在Web应用程序中,系统的瓶颈常在于系统的响应速度.如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也因此会大打折扣.因此,提高系统响应速度,是非常重要的. Web应用程序做的最多就是和后台数据 ...

  3. Chapter7(类) --C++Prime笔记

    类(关键词):数据抽象(数据成员和函数成员),封装(private),构造函数,静态成员 1.判断一个类是否是抽象数据类型,可以看我们对这个类的操作是对你内的数据成员操作,自己编写相应的处理函数,还是 ...

  4. C++下实现同接口下多个类作为参数的调用和传参

    /* 实现同接口下不同类的对象的转移 定义类的接口 定义多个继承该接口的类 定义管理类,把接口当作类型, 传入该接口下各种类的对象,进行操作 */ #include<iostream> # ...

  5. HDU 6249

    Alice’s Stamps Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)To ...

  6. Java入门:基础算法之从字符串中找到重复的字符

    本程序演示从一个字符串中找出重复的字符,并显示重复字符的个数. import java.util.HashMap; import java.util.Map; import java.util.Set ...

  7. 使用IDEA复用代码时常见问题

    使用IDEA复用代码时常见问题 觉得有用的话,欢迎一起讨论相互学习~Follow Me 作为新手在直接复用别人的java代码并使用IDEA进行二次开发时,经常出现一些奇怪的问题,在此做一些总结~ In ...

  8. jquery实现行列的单向固定和列的拖拽

    其实这些功能在PL/SQL Dev中都有实现,在页面中还是蛮常见的. 我实现列的单向固定的原理:将需要单向固定的列放在一个<table>标签中,而整体的数据放在另一个<table&g ...

  9. Linux下安装PHP的lua扩展库

    一.安装Lua 5.3.4 下载 http://www.lua.org/ftp/lua-.tar.gz tar xvf lua-.tar.gz cd lua- 重要:进入解压缩后的路径 cd .../ ...

  10. PHP7 学习笔记(二)PHP5.9 升级到PHP7 遇到的一些坑的记录(php-fpm 图解)

    apache_event_php-fpm 示意图: nginx-php-fpm示意图: Worker-Master-Server TCP-Nginx_PHP Nginx-FastCGI 1.使用$_G ...