VueJs禁用/啓用Div當選中

我知道它是一個noob問題，但是，如何在vue.js中使用div b disable，並且選擇了選項B時，如何使用Vue禁用div A。 JS。VueJs禁用/啓用Div當選中

<div id="app"> 

    <select> 

     <option>A</option> 

     <option>B</option> 

    </select> 

    <div id="a"> 

      A 

    </div> 

    <div id="b"> 

      B 

    </div>

來源

2017-06-19 Mathew Magante

一點也沒有」沒有意義，禁用div。禁用屬性僅與類似輸入的元素相關。查看完整列表：https：//www.w3schools.com/tags/att_disabled.asp – Cobaltway

首先，你應該尋找Vue's Methods。

更新：19/06/2017 - 16:35

如果你想代碼示例，你可以使用這個例子：

var app = new Vue({ 
 
\t el: '#app', 
 
\t data: { 
 
\t \t selected: '' 
 
\t }, 
 
})

#a { 
 
\t width: 128px; 
 
\t height: 128px; 
 
\t background-color: gray; 
 
} 
 

 
#b { 
 
\t width: 128px; 
 
\t height: 128px; 
 
\t background-color: red; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
 
<div id="app"> 
 
\t <select v-model="selected"> 
 
\t \t <option disabled value="">Select div name</option> 
 
\t \t <option value="a">A</option> 
 
\t \t <option value="b">B</option> 
 
\t </select> 
 
\t <div id="a" v-if="selected === 'a'"> 
 
\t Div A 
 
\t </div> 
 
\t <div id="b" v-else> 
 
\t Div B 
 
\t </div> 
 
</div>

來源

2017-06-19 11:10:04 Ali

這不是非常利用vue。 – Bert

@BertEvans是的你是對的。我改變了我的代碼。他可以使用v-if和v-else。 **我認爲**，Vue不只是一個模板。所以，如果我們需要一些JS代碼，即使它非常簡單，我們也可以使用。 – Ali

@Ali非常感謝，這是我需要的。 –

如果通過禁用你的意思是隱藏ID或從DOM中刪除它 - 是的，你可以用Vue做到這一點。

同時適用於： 1.分配選擇到模型等v-model='selected' 2.在模型啓動它：data() { return { selected: null; (...) } }

V-如果 - DIV將被移除/從/到insterted DOM

在您的div：<div id='a' v-if="selected=== 'a'"

V秀 - 格將被隱藏/顯示

在您的div：<div id='a' v-show="selected=== 'a'"

來源

2017-06-19 07:52:10

感謝您的答案，你可以把完整的代碼vue，我是新的vue，我不知道如何把它的語法腳本。再次提前謝謝你。 –

SO不是免費的編碼服務。你應該嘗試自己做。這是非常簡單的工作。你會學到更多自己做。我給你解決你的問題。 https://vuejs.org/v2/guide/index.html –

@MathewMagante閱讀Vuejs指南，你會在一段時間後明白。自己編寫代碼比勺子編寫更好。它也適合你自己！ –

VueJs禁用/啓用Div當選中

回答

相關問題