欢迎光临
我们一直在努力

vue.js如何让文本框、按钮、下拉框、单选按钮、多选择按钮禁用

本篇文章讲解一下vue.js 让文本框、按钮、下拉框、单选按钮、多选择按钮不可用的方法。

本例子还加入不可用的样式。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>vue让控件不可用</title>
    <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <style>
        .disabledCss { cursor: not-allowed; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; opacity: .55; }
    </style>
</head>
<body>
    <div id='app'>
        <input type="radio" :disabled="!disabled" /> 这是单选
        <input type="checkbox" :disabled="!disabled" /> 这是多选
        <select :disabled="!disabled">
            <option>选项一</option>
            <option>选项二</option>
            <option>选项三</option>
        </select>
        <input type="text" :disabled="!disabled" />
        <input type="button" value="这是一个按钮" :disabled="!disabled" />
        <input type="button" :class="{'disabledCss':!disabled}" :disabled="!disabled" value="有禁用样式的按钮" />
    </div>
</body>
</html>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            disabled:false  //true 可用,  false 不可用
        }
    });
</script>

如果需要vue.js、js/jquery-2.2.3.min.js文件,可以去下面这文章的demo中获取

vue.js如何实现图片上传

赞(0)
未经允许不得转载:自游互动 » vue.js如何让文本框、按钮、下拉框、单选按钮、多选择按钮禁用
分享到: 更多 (0)

自由技术,自由自在

项目合作联系我们