vue之Element-Ui輸入框顯示與隱藏的方法是什么

這篇“vue之Element-Ui輸入框顯示與隱藏的方法是什么”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue之Element-Ui輸入框顯示與隱藏的方法是什么”文章吧。

Element-Ui輸入框顯示與隱藏

使用element-ui比較簡單,添加show-password即可

效果展示：

1. 隱藏展示

2. 顯示

<el-input placeholder="請輸入賬號密碼" v-model="input" show-password></el-input>

Element el-input 輸入框詳解

1. 用途

輸入框是使用非常多的元素，用來輸入用戶名、密碼等等信息。Element提供了功能和樣式豐富的輸入框，本篇就來了解下。

2. 輸入框

輸入框為el-input，其編譯后生成的HTML元素為input，樣式class中包含el-input，所以我們首先設(shè)定下統(tǒng)一樣式，便于演示。

.el-input {
  width: 200px;
}

2.1 輸入框基本功能

輸入框可以與js變量雙向綁定，代碼為：

    輸入框基本功能：雙向綁定
    <el-input v-model="input1"></el-input> 輸入內(nèi)容為：{{input1}}
    <el-divider></el-divider>

效果如下：

2.2 顯示占位文本

占位文本可以在輸入框內(nèi)容未輸入時顯示提示信息。

  	輸入框功能1:顯示占位文本
    <el-input v-model="input1" placeholder="請輸入姓名"></el-input>
    <el-divider></el-divider>

2.3 禁用

可以使用disabled屬性禁用輸入框。

 	輸入框功能2:禁用
    <el-input v-model="input1" disabled></el-input>
    <el-divider></el-divider>

2.4 可清空的輸入框

可以使用clearable屬性提供可清空功能，當(dāng)輸入框中已有內(nèi)容時即顯示一個清空按鈕，點擊清空按鈕后直接清空文本框。

    輸入框功能3:可清空
    <el-input v-model="input1" clearable></el-input>
    <el-divider></el-divider>

2.5 顯示密碼框

可以通過show-password屬性將輸入框顯示為密碼框。

  	輸入框功能4:顯示為密碼框
    <el-input v-model="input1" show-password></el-input>
    <el-divider></el-divider>

2.6 顯示圖標(biāo)

可以通過prefix-icon或suffix-icon屬性為輸入框設(shè)置顯示在前方/后方的圖標(biāo)。

    輸入框功能5:顯示圖標(biāo)
    <el-input v-model="input1" prefix-icon="el-icon-search"></el-input>
    <el-input v-model="input1" suffix-icon="el-icon-search"></el-input>
    <el-divider></el-divider>

2.7 輸入長度限制

可以設(shè)置輸入長度的上限。

 	輸入框功能6:輸入長度限制
    <el-input v-model="input1" maxlength="10" show-word-limit></el-input>
    <el-divider></el-divider>

3. 文本域

可以使用type="textarea"將輸入框轉(zhuǎn)換為文本域，注意文本域編譯后對應(yīng)HTML類型為<textarea>，對應(yīng)樣式為el-textarea，所以我們CSS部分設(shè)置為：

.el-textarea {
  width: 400px;
}

HTML代碼：

  	文本域基本功能：顯示多行文本
    <el-input type="textarea" :rows="2" placeholder="請輸入內(nèi)容" v-model="input1"></el-input>
    <el-divider></el-divider>

效果：

以上就是關(guān)于“vue之Element-Ui輸入框顯示與隱藏的方法是什么”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。