VueJs 选中时禁用/启用 Div答案

【问题标题】：VueJs Disable/Enable Div when selectedVueJs 选中时禁用/启用 Div
【发布时间】：2017-11-21 07:36:31
【问题描述】：

如何在vue.js中使其在vue.js中，如果选择a是选项a div b禁用，并且选择选项b时，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>

【问题讨论】：

禁用 div 没有意义。 disabled 属性仅与类似输入的元素相关。查看完整列表：w3schools.com/tags/att_disabled.asp

标签： javascript vue.js vuejs2

【解决方案1】：

如果禁用是指隐藏 id 或将其从 DOM 中删除 - 是的，您可以使用 Vue 来做到这一点。

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

v-if - DIV 将从/插入到 DOM 中

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

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

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

【讨论】：

SO 不是免费的编码服务。你应该尝试自己做。这真的是很简单的工作。自己做会学到更多。我给你解决了你的问题。 vuejs.org/v2/guide/index.html
@MathewMagante 阅读 Vuejs 指南，过一会儿你就会明白了。最好自己编写代码而不是用勺子喂。也是为了你好！

【解决方案2】：

首先，你应该搜索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>

【讨论】：

这个不是很用vue。
@BertEvans 是的，你是对的。我改变了我的代码。他可以使用 v-if 和 v-else。 我认为，Vue 不仅仅是一个模板。所以，如果我们需要一些JS代码，即使很简单也可以使用。
@MathewMagante 如果此代码正常，您可以标记为已解决。