javascript - VueJs 选择时禁用/启用 Div

Question

如何在 vue.js 中实现它，如果选择选项 A，则 div b 禁用，而选择选项 B 时，使用 Vue.js 禁用 div A。

<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 .

更新时间:2017 年 6 月 19 日 - 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>