Vue控制是否禁用disabled属性

简介: 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”


效果:

有点卡.

相关文章
|
1天前
|
JavaScript Java 测试技术
基于vue和微信小程序的校园自助打印系统+springboot+vue.js附带文章和源代码设计说明文档ppt
基于vue和微信小程序的校园自助打印系统+springboot+vue.js附带文章和源代码设计说明文档ppt
19 7
|
1天前
|
JSON JavaScript 前端开发
|
1天前
|
JavaScript 前端开发 Java
开发语言漫谈-Vue
Vue严格说来不是一门语言
|
3天前
|
JavaScript 前端开发 C++
【Vue】Vue快速入门、Vue常用指令、Vue的生命周期
【Vue】Vue快速入门、Vue常用指令、Vue的生命周期
13 2
|
5天前
|
存储 缓存 JavaScript
谈谈你对vue的了解
谈谈你对vue的了解
15 3
|
5天前
|
JavaScript API
Vue axjx 跨域请求
Vue应用中解决跨域问题可通过配置代理服务器。方法一是设置`devServer.proxy`到目标服务器端口,如`http://localhost:3000`,然后使用axios发送请求。方法二是为多个代理配置,如`/api`和`/api2`,分别指向不同端口,利用`pathRewrite`重写路径。请求时需加上相应前缀,如`/api/index`。
15 1
|
6天前
|
JavaScript 前端开发 Java
JavaSE精选-Vue
JavaSE精选-Vue
7 1
|
6天前
|
JavaScript
Vue父子组件传值
<!-- 父组件向子组件传地值 -->
17 2
|
6天前
|
JavaScript Java
Vue : v-if, v-show
Vue : v-if, v-show
13 0
Vue : v-if, v-show
|
6天前
|
JavaScript 前端开发
Vue : 监视属性
Vue : 监视属性
9 0