vue2.0 下拉框默認標題設置方法
更新時間：2018年08月22日 08:45:02 作者：vae的粉
今天小編就為大家分享一篇vue2.0 下拉框默認標題設置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
昨天到今天，用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 設置為那個選項的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 下拉框默認標題設置方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
Vue聲明式導航與編程式導航及導航守衛(wèi)和axios攔截器全面詳細講解
這篇文章主要介紹了Vue聲明式導航與編程式導航及導航守衛(wèi)和axios攔截器，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-01-01
這篇文章主要介紹了Vuex總體案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-09-09
在本文里小編給各位整理了關于django模板與vue.js沖突問題以及實例代碼，需要的朋友們參考下。2019-07-07
這篇文章主要介紹了Vue.js路由管理器 Vue Router，主要介紹的是路由元信息，命名路由以及嵌套路由等使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
這篇文章主要介紹了vue-element的select下拉框賦值實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了使用vue-router切換組件時使組件不銷毀問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue項目中播放rtmp視頻文件流 ,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09
這篇文章主要介紹了Vue 自定義標簽的src屬性不能使用相對路徑的解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
關于element-ui表單中限制輸入純數(shù)字的解決方式
這篇文章主要介紹了關于element-ui表單中限制輸入純數(shù)字的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue2.x如何解決Element組件el-tooltip滾動時錯位不消失的問題
這篇文章主要介紹了Vue2.x如何解決Element組件el-tooltip滾動時錯位不消失的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06