基于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 相关文章推荐
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
浅析Javascript中bind()方法的使用与实现
May 30 Javascript
json定义及jquery操作json的方法
Oct 03 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
Bootstrap表格使用方法详解
Feb 17 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
值得收藏的vuejs安装教程
Nov 21 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
Sep 11 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 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实现压缩多个CSS与JS文件的方法
2014/11/11 PHP
php使用socket post数据到其它web服务器的方法
2015/06/02 PHP
PHP yii实现model添加默认值的方法(两种方法)
2016/11/10 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
Js动态创建div
2008/09/25 Javascript
javascript 面向对象继承
2009/11/26 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
微信小程序 弹幕功能简单实例
2017/02/14 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
es6+angular1.X+webpack 实现按路由功能打包项目的示例
2017/08/16 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
详解Angular如何正确的操作DOM
2018/07/06 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
JavaScript获取当前url路径过程解析
2019/12/27 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
完美解决Python2操作中文名文件乱码的问题
2017/01/04 Python
Windows下python3.7安装教程
2018/07/31 Python
Python实现的建造者模式示例
2018/08/06 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
澳大利亚个性化儿童礼品网站:Bright Star Kids
2019/06/14 全球购物
英国玛莎百货新西兰:Marks & Spencer New Zealand
2019/07/21 全球购物
如何现实servlet的单线程模式
2014/08/05 面试题
公务员总结性个人自我评价
2013/12/05 职场文书
办公室前台岗位职责
2014/01/04 职场文书
开会迟到检讨书
2014/01/08 职场文书
公休请假条
2014/04/11 职场文书
实习推荐信
2014/05/10 职场文书
全运会口号
2014/06/20 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
MySQL慢查询优化解决问题
2022/03/17 MySQL
详解MySQL的内连接和外连接
2023/05/08 MySQL