admin管理员组

文章数量:1641390

添加属性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”

效果:
有点卡.

本文标签： 属性vuedisabled

版权声明：本文标题：Vue控制是否禁用disabled属性 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1729317602a1195487.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。