vue2.0 下拉框默认标题设置方法


Posted in Javascript onAugust 22, 2018

昨天到今天,用vue2.0在写一个性别选择框,一给option添加seledted属性就报错这里

vue2.0 下拉框默认标题设置方法

vue2.0 下拉框默认标题设置方法

下面是报错的代码

ERROR in ./~/vue-loader/lib/template-compiler.js?id=data-v-c231dfa2!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/second.vue
template syntax error <select v-model="selected">:
inline selected attributes on <option> will be ignored when using v-model. Declare initial values in the component's data option instead.

selected 已经绑定在<select></select> 上了 , 你选择了哪个选项, selected 就是那个选项的value了 ,你想让哪个选项为默认选中的话,就在data里的seleced 设置为那个选项的value

在单击<select></select> 时,给'性别'这个选项添加一个disabled属性就可以禁用了

<template>
 <select v-model='selected' @click="ss()">
 <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', // 比如想要默认选中为性别,那么就把他的value值设置为'sex'
 options: [
 {text: '性别', value: 'sex', disabled: ''}, //每个选项里面就不用在多一个selected 了
 {text: '男', value: '1'},
 {text: '女', value: '2'}
 ]
 }
 },
 methods: {
 ss: function () {
 this.options[0].disabled = disabled;
 },
 }
 }
</script>

以上这篇vue2.0 下拉框默认标题设置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ie 调试javascript的工具
Apr 29 Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
详解Javascript事件驱动编程
Jan 03 Javascript
Node.js的Web模板引擎ejs的入门使用教程
Jun 06 Javascript
JavaScript6 let 新语法优势介绍
Jul 15 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
js实现复选框的全选和取消全选效果
Jan 03 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
Nov 03 Javascript
如何在 Vue 表单中处理图片
Jan 26 Vue.js
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
js canvas实现红包照片效果
Aug 21 #Javascript
js实现简单选项卡功能
Mar 23 #Javascript
You might like
PHP的类 功能齐全的发送邮件类
2006/10/09 PHP
推荐一篇入门级的Class文章
2007/03/19 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
jquery 插件学习(六)
2012/08/06 Javascript
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
JavaScript实现选中文字提示新浪微博分享效果
2017/06/15 Javascript
Javascript(es2016) import和require用法和区别详解
2017/08/11 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
JavaScript文件的同步和异步加载的实现代码
2017/08/19 Javascript
基于javascript的拖拽类封装详解
2019/04/19 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
Python内建数据结构详解
2016/02/03 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
Python递归函数实例讲解
2019/02/27 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
Python之pymysql的使用小结
2019/07/01 Python
在自动化中用python实现键盘操作的方法详解
2019/07/19 Python
python实现图片插入文字
2019/11/26 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
Python-opencv 双线性插值实例
2020/01/17 Python
python实现吃苹果小游戏
2020/03/21 Python
python3发送request请求及查看返回结果实例
2020/04/30 Python
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
大学军训通讯稿
2014/01/13 职场文书
网络技术专业求职信
2014/02/18 职场文书
爱护花草树木的标语
2014/06/11 职场文书
2014年征兵标语
2014/06/20 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书