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 相关文章推荐
Javascript String对象扩展HTML编码和解码的方法
Jun 02 Javascript
Js 随机数产生6位数字
May 13 Javascript
javascript预加载图片、css、js的方法示例介绍
Oct 14 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
jQuery 改变P标签文本值方法
Feb 24 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
JavaScript实现创建自定义对象的常用方式总结
Jul 09 Javascript
Element输入框带历史查询记录的实现示例
Jan 15 Javascript
前端天气插件tpwidget使用方法详解
Jun 24 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 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
js canvas实现红包照片效果
Aug 21 #Javascript
js实现简单选项卡功能
Mar 23 #Javascript
You might like
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
php中switch语句用法详解
2015/08/17 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
js getElementsByTagName的简写方式
2010/06/27 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
juqery 学习之四 筛选过滤
2010/11/30 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
FF IE浏览器修改标签透明度的方法
2014/01/27 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
Angular2 自定义validators的实现方法
2017/07/05 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
python事件驱动event实现详解
2018/11/21 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
通过pycharm使用git的步骤(图文详解)
2019/06/13 Python
基于Django ORM、一对一、一对多、多对多的全面讲解
2019/07/26 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
德国苹果商店:MacTrade
2020/05/18 全球购物
学位证书委托书
2014/09/30 职场文书
民主评议党员总结
2014/10/20 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
2016小学优秀教师先进事迹材料
2016/02/26 职场文书
简述Java中throw-throws异常抛出
2021/08/07 Java/Android
Python实现简单的俄罗斯方块游戏
2021/09/25 Python