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

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

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

效果展示:

  密碼隱藏:

  密碼顯示:

代碼展示:

   一:<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"屬性,不然無法顯示圖標(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類型
      passw:"password",
      //用于更換Input中的圖標(biāo)
      icon:"el-input__icon el-icon-view",
      adduser:{
        id:null,
        name:null,
        password:null,
        dept_id:null
      },
    },
    methods:{
       //密碼的隱藏和顯示
      showPass(){
          //點擊圖標(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)簽中密碼的顯示和隱藏,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!

相關(guān)文章

最新評論