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 相关文章推荐
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
jQuery实现网页抖动的菜单抖动效果
Aug 07 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
AngularJS中的拦截器实例详解
Apr 07 Javascript
vue的mixins属性详解
Mar 14 Javascript
JS的Ajax与后端交互数据的实例
Aug 08 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 Javascript
使用gulp构建前端自动化的方法示例
Dec 25 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
layui前端时间戳转化实例
Nov 15 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 HtmlReplace输入过滤安全函数
2010/07/03 PHP
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
使用js+jquery实现无限极联动
2013/05/23 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
理解javascript中的原型和原型链
2015/07/30 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
js实现日历的简单算法
2017/01/24 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
2017/09/16 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
详解Python中的from..import绝对导入语句
2016/06/21 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
Blank NYC官网:夹克、牛仔裤等
2020/12/16 全球购物
网管求职信
2014/03/03 职场文书
党员教师工作决心书
2014/03/13 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书
python tkinter实现定时关机
2021/04/21 Python
python unittest单元测试的步骤分析
2021/08/02 Python
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python