基于vue.js中关于下拉框的值默认及绑定问题


Posted in Javascript onAugust 22, 2018

一、今天遇到vue中下拉框问题,故而写点东西留个脚印

<template>

 <select v-model='selected' @click="disable()">
 <option v-for="(option,index) in options" v-bind:value="option.value" :disabled="option.disabled">
  {{ option.text }}{{index}}{{option.disabled}}
 </option>
 </select>
 <span>Selected: {{ selected }}</span>
</template>
<script>
 export default{
 name: 'second',
 data(){
  return {
  selected: 'sex', // 这里选择默认项
  options: [
   {text: '点击选择性别', value: 'sex', disabled: ''},
   {text: '男', value: '1'},
   {text: '女', value: '2'}
  ]
  }
 },
 methods: {
  disable: function () {
  this.options[0].disabled = disabled;
  },
 }
 }
</script>

以上这篇基于vue.js中关于下拉框的值默认及绑定问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
JS控件的生命周期介绍
Oct 22 Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
Javascript中arguments对象的详解与使用方法
Oct 04 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 Javascript
jQuery自动或手动图片切换效果
Oct 11 jQuery
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
Vue中的v-for指令不起效果的解决方法
Sep 27 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
Jun 03 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 #Javascript
vue2.0 下拉框默认标题设置方法
Aug 22 #Javascript
VUE中v-on:click事件中获取当前dom元素的代码
Aug 22 #Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 #jQuery
js动态设置select下拉菜单的默认选中项实例
Aug 21 #Javascript
Canvas实现微信红包照片效果
Aug 21 #Javascript
Vue开发实现吸顶效果的示例代码
Aug 21 #Javascript
You might like
一个简单的php实现的MySQL数据浏览器
2007/03/11 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
ASP和PHP实现生成网站快捷方式并下载到桌面的方法
2014/05/08 PHP
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
基于javascript的COOkie的操作实现只能点一次
2014/12/26 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
从Python的源码浅要剖析Python的内存管理
2015/04/16 Python
Python实现处理管道的方法
2015/06/04 Python
Python 使用SMTP发送邮件的代码小结
2016/09/21 Python
Python正则捕获操作示例
2017/08/19 Python
python 调用c语言函数的方法
2017/09/29 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
python实现跨excel的工作表sheet之间的复制方法
2018/05/03 Python
python pandas修改列属性的方法详解
2018/06/09 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
计算机专业个人求职信范例
2013/09/23 职场文书
2014年个人年终总结
2015/03/09 职场文书
社区活动总结范文
2015/05/07 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python
Mysql如何查看是否使用到索引
2022/12/24 MySQL