vue2.0 下拉框默認標題設(shè)置方法
更新時間：2018年08月22日 08:45:02 作者：vae的粉
今天小編就為大家分享一篇vue2.0 下拉框默認標題設(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了 ，你想讓哪個選項為默認選中的話，就在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', // 比如想要默認選中為性別，那么就把他的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 下拉框默認標題設(shè)置方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要為大家詳細介紹了Vue實現(xiàn)雙向數(shù)據(jù)綁定的方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
本篇文章將會嘗試從算法的角度主要聊一聊vue2的diff策略,幫助讀者朋友在遇到相關(guān)的面試題時可以和面試官談笑風(fēng)生,文中有相關(guān)的圖解和代碼示例,感興趣的同學(xué)跟著小編一起來看看吧2023-08-08
Vue+Node實現(xiàn)商品列表的分頁、排序、篩選，添加購物車功能詳解
這篇文章主要介紹了Vue+Node實現(xiàn)商品列表的分頁、排序、篩選，添加購物車功能,結(jié)合實例形式分析了vue.js前臺商品分頁、排序、篩選等功能及后臺node.js處理技巧,需要的朋友可以參考下2019-12-12
vue3中require報錯require is not defined問題及解決
這篇文章主要介紹了vue3中require報錯require is not defined問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
computed是vue的配置選項,它的值是一個對象,其中可定義多個計算屬性,每個計算屬性就是一個函數(shù),下面這篇文章主要給大家介紹了關(guān)于vue中計算屬性computed的詳細講解,需要的朋友可以參考下2022-11-11
vue+elementUI實現(xiàn)右擊指定表格列的單元格顯示選擇框功能
這篇文章主要介紹了vue+elementUI實現(xiàn)右擊指定表格列的單元格顯示選擇框功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
無論是開發(fā)新手還是經(jīng)驗豐富的老手，我們都喜歡開源軟件包。本文主要介紹了35個最好用的Vue開源庫，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-01-01
詳解Vue-cli中的靜態(tài)資源管理（src/assets和static/的區(qū)別）
這篇文章主要介紹了Vue-cli中的靜態(tài)資源管理（src/assets和static/的區(qū)別，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了解決Vue2.x父組件與子組件之間的雙向綁定問題,需要的朋友可以參考下2018-03-03
本文主要介紹了Vue實現(xiàn)模糊查詢搜索功能的步驟,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-10-10