vue.js 获取select中的value实例


Posted in Javascript onMarch 01, 2018

如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<label id="app">
<select v-model="selected" >
 <option v-for="option in options" v-bind:value="option.value">
 {{ option.text }}
 </option>
</select>
<span>Selected: {{ selected }}</span>
</label>
<script>
new Vue({
 el: '#app',
 data: {
 selected: 'A',
 options: [
  { text: 'One', value: 'A' },
  { text: 'Two', value: 'B' },
  { text: 'Three', value: 'C' }
 ]
 }
})
</script>
</body>
</html>

以上这篇vue.js 获取select中的value实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE/FireFox具备兼容性的拖动代码
Aug 13 Javascript
jQuery下的几个你可能没用过的功能
Aug 29 Javascript
js中将字符串转换成json的三种方式
Jan 12 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
不使用script导入js文件的几种方法
Oct 27 Javascript
angular双向绑定模拟探索
Dec 26 Javascript
Vue.js路由vue-router使用方法详解
Mar 20 Javascript
JavaScript递归算法生成树形菜单
Aug 15 Javascript
js replace 全局替换的操作方法
Jun 12 Javascript
vue递归获取父元素的元素实例
Aug 07 Javascript
Vue中的slot使用插槽分发内容的方法
Mar 01 #Javascript
在vue中封装可复用的组件方法
Mar 01 #Javascript
JavaScript判断日期时间差的实例代码
Mar 01 #Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 #Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 #Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
Mar 01 #Javascript
vue 虚拟dom的patch源码分析
Mar 01 #Javascript
You might like
php利用cookie实现访问次数统计代码
2011/05/19 PHP
php实现加减法验证码代码
2014/02/14 PHP
php判断是否为json格式的方法
2014/03/04 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
配置eslint规范项目代码风格
2019/03/11 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
Python中的列表知识点汇总
2015/04/14 Python
python实现简单中文词频统计示例
2017/11/08 Python
python实现装饰器、描述符
2018/02/28 Python
使用Python写一个小游戏
2018/04/02 Python
Python字典循环添加一键多值的用法实例
2019/01/20 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
售后主管岗位职责
2013/12/08 职场文书
大学本科生的个人自我评价
2013/12/09 职场文书
大学生创业感言
2014/01/25 职场文书
个人授权委托书
2014/04/03 职场文书
结婚典礼主持词
2015/06/29 职场文书
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android