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