添加属性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”
效果:
有点卡.
