Vue控制是否禁用disabled属性

添加属性disabled

<div id="app">
    <select disabled>
        <option value ="volvo">Volvo</option>
        <option value ="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
    </select>
</div>

查看多选框是否被禁用

灰色边框表示已被禁用，不太明显哈。

• 再改改disabled属性

	<select disabled="disabled">
        <option value ="volvo">Volvo</option>
        <option value ="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
    </select>

效果肯定是依旧被禁用状态

• 如果改为false呢

<select disabled="false">
        <option value ="volvo">Volvo</option>
        <option value ="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
    </select>

它依旧是禁用状态

• true呢?
  还是禁用的

• 即使随便改一个字符串,比如

<select disabled="你我他哈哈哈">
        <option value ="volvo">Volvo</option>
        <option value ="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
    </select>

最终也会被编译为如下,始终是禁用状态

v-bind

• 但是如果加一个v-bind呢,缩写 “:”

<select :disabled="false">
        <option value ="volvo">Volvo</option>
        <option value ="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
    </select>

诶,就可以选中了

那么就可以给一个变量,控制其布尔值,改变下拉菜单的禁用状态

<div id="app">
    <select :disabled="checkstate">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
    </select>
    <input type="checkbox" @change="isCheck">
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            checkstate: true
        },
        methods: {
            isCheck: function () {
                this.checkstate = !this.checkstate
            }
        }
    })
</script>

对 checkstate 赋值初始值为true, 即默认开始是被禁用的

然后对复选框绑定事件 需加上v-on,简写"@" ,进行事件监听.值改变时触发函数

对 变量值 checkstate 取反, 达到取消禁用的效果.

注意一点: “methods” ,不是 “method”

效果:
有点卡.