VueJs选中时禁用/启用Div

Question

如果选择选项A div b禁用，如果选择选项B，如何使用Vue.js禁用div A，如何在vue.js中创建。

<div id="app">

    <select>

        <option>A</option>

        <option>B</option>

    </select>

    <div id="a">

            A

    </div>

    <div id="b">

            B

    </div>

Answer 1

首先，您应该搜索Vue's Methods。

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

如果您想编码样本，可以使用此示例：

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

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

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

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

Answer 2

如果通过禁用你的意思是隐藏ID或从DOM中删除它 - 是的，你可以用Vue来做。

适用于： 1.将选择分配给模型，如v-model='selected' 2.在模型中启动它：data() { return { selected: null; (...) } }

v-if - DIV将被移除/插入DOM

1. 关于你的div：<div id='a' v-if="selected=== 'a'"

v-show - div将被隐藏/显示

1. 关于你的div：<div id='a' v-show="selected=== 'a'"