欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

el-input 標(biāo)簽中密碼的顯示和隱藏功能的實(shí)例代碼

 更新時(shí)間：2019年07月19日 16:42:23   作者：十五小哥哥  
本文通過(guò)實(shí)例代碼給大家介紹了el-input 標(biāo)簽中密碼的顯示和隱藏 ,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

效果展示：

　　密碼隱藏：

　　密碼顯示：

代碼展示：

 　　一：<el-input>標(biāo)簽代碼

 <el-form-item label="密碼" prop="password">
   <el-input :type="passw" v-model="adduser.password" style="width: 300px;" >
      <%-- input中加圖標(biāo)必須要有slot="suffix"屬性，不然無(wú)法顯示圖標(biāo) --%>
      <i slot="suffix" :class="icon" @click="showPass"></i>
   </el-input>
 </el-form-item>

　　二：<script type="text/javascript">中代碼

<script type="text/javascript">
  var app = new Vue({
    el:"#app",
    data:{
      users:[],
      total:100,
      pageSize:5,
      pageNum:1,
      //用于顯示或隱藏添加修改表單
      add:false,
      //用于改變Input類(lèi)型
      passw:"password",
      //用于更換Input中的圖標(biāo)
      icon:"el-input__icon el-icon-view",
      adduser:{
        id:null,
        name:null,
        password:null,
        dept_id:null
      },
    },
    methods:{
　　　　　　　//密碼的隱藏和顯示
      showPass(){
　　　　　　　　　　//點(diǎn)擊圖標(biāo)是密碼隱藏或顯示
        if( this.passw=="text"){
          this.passw="password";
          //更換圖標(biāo)
          this.icon="el-input__icon el-icon-view";
        }else {
          this.passw="text";
          this.icon="el-input__icon el-icon-loading";
        };
      }
    },
  })
</script>

總結(jié)

以上所述是小編給大家介紹的el-input 標(biāo)簽中密碼的顯示和隱藏,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

相關(guān)文章

最新評(píng)論