<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. AngularJS1.X学习笔记8-自定义指令(上)

    AngulaJS的指令是一种非常强大的特性,一个ng-repeat就能让我们非常方便的展示一个数据列表,指令相当于是一个组件,为我们将一些东西封装起来了,提供了复用的可能性.个人认为自定义指令还是比较 ...

  2. keycloak管理用户权限

    一.在keycloak中定义基础数据 1.realm 如果多个模块使用不同的用户权限,就分realm 如果多个模块共用一套用户权限,就顶一个一个realm 2.每个模块是一个client-app 3. ...

  3. 新概念英语(1-53)An interesting climate

    新概念英语(1-53)An interesting  climate What's the favourite subject of conversation in England? A:Where ...

  4. 超简单的jQuery前台分页,不需导包

    今天我们介绍一个不需要导分页包的,非常容易上手的分页+模糊查询功能.接下来先介绍分页功能: 首先第一步,你要有个要去分页的列表.我这里敲了个简单的图书管理,作为展示的基础,它的列表为异步提交,由两部分 ...

  5. Intent 的两种主要使用方法

    首先建立两个activity界面 Activity1如下 public class MainActivity extends AppCompatActivity { private Button bt ...

  6. Spring学习(1)——快速入门

    认识 Spring 框架 Spring 框架是 Java 应用最广的框架,它的成功来源于理念,而不是技术本身,它的理念包括 IoC (Inversion of Control,控制反转) 和 AOP( ...

  7. eclipse 复制原项目工作空间

    eclipse 复制原项目工作空间 具体步骤: 1.首先把你需要升级的eclipse 下载并解压 2.解压好后,右击  3.进入后你能看到这样一个页面 4.我的安装路径D:\work\Eclipse\ ...

  8. html学习之多行文本

    代码如下: <body> <form action="post"> <!--wrap设置多行文本是否自动换行--> <textarea n ...

  9. 使用Git简单笔记

    这里只是作为简单的笔记整理,第一次使用的推荐先看一下廖大的教程,内容很多很细,可以边看边练.看不懂的地方先记着.争取七七八八看下来. ================================= ...

  10. CentOS 7下Flannel安装与配置

    1. 安装前的准备 etcd 3.2.9 Docker 17.12.0-ce 三台机器10.100.97.236, 10.100.97.92, 10.100.97.81 etcd不同版本之间的差别还是 ...