vue2.0 下拉框默認(rèn)標(biāo)題設(shè)置方法

更新時間：2018年08月22日 08:45:02 作者：vae的粉

今天小編就為大家分享一篇vue2.0 下拉框默認(rèn)標(biāo)題設(shè)置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

昨天到今天，用vue2.0在寫一個性別選擇框，一給option添加seledted屬性就報錯這里

下面是報錯的代碼

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 已經(jīng)綁定在<select></select> 上了 , 你選擇了哪個選項， selected 就是那個選項的value了，你想讓哪個選項為默認(rèn)選中的話，就在data里的seleced 設(shè)置為那個選項的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', // 比如想要默認(rèn)選中為性別，那么就把他的value值設(shè)置為'sex'
 options: [
 {text: '性別', value: 'sex', disabled: ''}, //每個選項里面就不用在多一個selected 了
 {text: '男', value: '1'},
 {text: '女', value: '2'}
 ]
 }
 },
 methods: {
 ss: function () {
 this.options[0].disabled = disabled;
 },
 }
 }
</script>

以上這篇vue2.0 下拉框默認(rèn)標(biāo)題設(shè)置方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue.js 2.0中select級聯(lián)下拉框?qū)嵗?/a>

相關(guān)文章

Vue聲明式導(dǎo)航與編程式導(dǎo)航及導(dǎo)航守衛(wèi)和axios攔截器全面詳細(xì)講解
這篇文章主要介紹了Vue聲明式導(dǎo)航與編程式導(dǎo)航及導(dǎo)航守衛(wèi)和axios攔截器，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
2023-01-01
Vuex總體案例詳解
這篇文章主要介紹了Vuex總體案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
2021-09-09
詳解django模板與vue.js沖突問題
在本文里小編給各位整理了關(guān)于django模板與vue.js沖突問題以及實例代碼，需要的朋友們參考下。
2019-07-07
淺談Vue.js路由管理器 Vue Router
這篇文章主要介紹了Vue.js路由管理器 Vue Router，主要介紹的是路由元信息，命名路由以及嵌套路由等使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-08-08
vue-element的select下拉框賦值實例
這篇文章主要介紹了vue-element的select下拉框賦值實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-03-03
使用vue-router切換組件時使組件不銷毀問題
這篇文章主要介紹了使用vue-router切換組件時使組件不銷毀問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue項目中播放rtmp視頻文件流的方法
這篇文章主要介紹了vue項目中播放rtmp視頻文件流 ,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-09-09
Vue 自定義標(biāo)簽的src屬性不能使用相對路徑的解決
這篇文章主要介紹了Vue 自定義標(biāo)簽的src屬性不能使用相對路徑的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
關(guān)于element-ui表單中限制輸入純數(shù)字的解決方式
這篇文章主要介紹了關(guān)于element-ui表單中限制輸入純數(shù)字的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
Vue2.x如何解決Element組件el-tooltip滾動時錯位不消失的問題
這篇文章主要介紹了Vue2.x如何解決Element組件el-tooltip滾動時錯位不消失的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06