只讀：readonly
在data里定義：readonly: true,
然后在input框里加上readonly就可以了。
禁用：disabled
在data里定義：edit: true,
然后在input框里加上：:disabled="edit"就可以了
PS：下面看下elementui通過 disabled 屬性指定是否禁用 input 組件，如何用DOM操作取消disabled 屬性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>通過 disabled 屬性指定是否禁用 input 組件</title> <link rel="stylesheet" href="elementui/elementui.css" rel="external nofollow" ></head><body> <div id="app"> <el-dialog title="收貨地址" :visible.sync="dialogFormVisible"> <el-form :model="form"> <el-form-item label="活動名稱" :label-width="formLabelWidth"> <el-input v-model="form.name" auto-complete="off" :disabled="true" class="input"></el-input> </el-form-item> <el-form-item label="活動區(qū)域" :label-width="formLabelWidth"> <el-select v-model="form.region" placeholder="請選擇活動區(qū)域"> <el-option label="區(qū)域一" value="shanghai"></el-option> <el-option label="區(qū)域二" value="beijing"></el-option> </el-select> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="dialogFormVisible = false">取 消</el-button> <el-button type="primary" @click="cancelAttr">確 定</el-button> </div> </el-dialog> </div> </body><script type="text/javascript" src="vue/vue.min.js"></script><script type="text/javascript" src="elementui/elementui.js"></script><script type="text/javascript"> new Vue({ el:'#app', data(){ return{ dialogFormVisible: true, form: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' }, formLabelWidth: '120px' } }, mounted(){ }, methods:{ //點擊確定的時候取消屬性 cancelAttr(){ //1.首先我們要拿到input的父class(input) //當我們設置disabled屬性的時候，父集的class設置成 input el-input is-disabled，首先我們改變父集的class,把父集改成可編輯狀態(tài)，才能修改input的屬性 const parent = document.querySelector(".input"); parent.className = "input el-input ";//改變父集的class,把父集改成可編輯狀態(tài)， //2.在設置input屬性 //獲取input const input = document.querySelector(".input input"); //設置input的屬性為false input.disabled = false; } } })</script></html>
新聞熱點
疑難解答
圖片精選
