自游互动本篇文章讲解一下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中获取