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

只要保证data里面有个options,options里有value就行了。

select动态绑定vue.js的更多相关文章

  1. Vue.js 动态绑定class

    Vue.js 的核心是一个响应的数据绑定系统,它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据.被绑定的DOM 将与数据保持同步,每当数据有改动,相应的DOM视图也会更新 ...

  2. Vue.js中使用select选择下拉框

    在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...

  3. 【前端】vue.js实现按钮的动态绑定

    vue.js实现按钮的动态绑定 实现效果: 实现代码以及注释: <!DOCTYPE html> <html> <head> <title>按钮绑定< ...

  4. vue.js双向绑定之--select获取text

    在大多数情况下select下拉菜单都是value和text设置不同的值的,value一般来说是与后台交互的值,而text是前端用来显示的文本: 但是,vue.js对到表单的双向绑定时如果option设 ...

  5. vue.js父子组件通信动态绑定

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. Vue.js先入个门看看

    使用vue.js原文介绍:Vue.js是一个构建数据驱动的web界面库.Vue.js的目标是通过尽可能简单的API实现响应式数据绑定和组合的视图组件.vue.js上手非常简单,先看看几个例子: 例一: ...

  7. Vue.js起手式+Vue小作品实战

    本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...

  8. Vue.js 学习笔记 一

    本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...

  9. Vue.js 基础指令实例讲解(各种数据绑定、表单渲染大总结)——新手入门、高手进阶

    Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...

随机推荐

  1. 用C#(.NET Core) 实现简单工厂和工厂方法模式

    本文源自深入浅出设计模式. 只不过我是使用C#/.NET Core实现的例子. 前言 当你看见new这个关键字的时候, 就应该想到它是具体的实现. 这就是一个具体的类, 为了更灵活, 我们应该使用的是 ...

  2. 新概念英语(1-19)Tired and thirsty

    新概念英语(1-19)Tired and thirsty Why do the children thank their mother? A:What's the matter, children? ...

  3. 【Java】0X003 面向对象

    一. 什么是面向对象 都说Java是一门面向对象的语言,但什么对象?什么又是面向对象?以下都是我学到的知识和一点自己的理解. 对象是指包含属性和行为的主体. 比如,人有性别.血型.单眼皮或双眼皮等的特 ...

  4. 安卓手机USB共享网络给PC上网

    开端 哈哈,最近我又发现了一个校园网的漏洞,但是只能手机连接,于是就想手机连接之后通过usb共享给电脑上网. 在手机上连接校园网WiFi,开启USB网络共享并且连接电脑之后,却发现电脑十分的卡顿!CP ...

  5. scrapy中的response

    初始化参数 class scrapy.http.Response( url[, status=200, headers, body, flags ] ) 其他成员 url status headers ...

  6. 判断字符串的后缀.endswith()

    可以用str.endswith('.jpg')来判断字符串是否以jpg结尾,返回True或者False

  7. 关于sql多表去重问题

    很多人新手对于数据库distinct 的用法有误解接下来我们看一段代码: 数据表:table  id name    1 a   2 b   3 c   4 c   5 b   我们使用distinc ...

  8. Cassanfra、Hbase和MongoDB的选取

    HBase比较中庸些,适合各种场景: Cassandra适合读写分离的场景,写入场景使用Cassandra,比如插入操作日志,或领域事件日志的写入: 而MongoDB适合做读写分离场景中的读取场景. ...

  9. 有些ES6方法极简,但是性能不够好

    So,也许你觉得ES6让你视野大开,但是并不是性能也能跟得上~ 首先,让我们先来一个简单的性能测试: 数组去重 es5写法: function delSame(arr){ var n = []; ; ...

  10. javaScript系列 [04]-javaScript的原型链

    [04]-javaScript的原型链 本文旨在花很少的篇幅讲清楚JavaScript语言中的原型链结构,很多朋友认为JavaScript中的原型链复杂难懂,其实不然,它们就像树上的一串猴子. 1.1 ...