vue眼睛图标的含义及用法解析

<template>

<div>

<input :type="passwordFieldType" v-model="password" />

<i @click="togglePasswordVisibility">{{ eyeIcon }}</i>

</div>

</template>

<script>

export default {

data() {

return {

password: '',

isPasswordVisible: false

}

},

computed: {

passwordFieldType() {

return this.isPasswordVisible ? 'text' : 'password';

},

eyeIcon() {

return this.isPasswordVisible ? '馃檲' : '馃憗锔?#39;;

}

},

methods: {

togglePasswordVisibility() {

this.isPasswordVisible = !this.isPasswordVisible;

}

}

}

</script>

<style scoped>

i {

cursor: pointer;

}

</style>

瑙ｉ噴锛?/p>

• passwordFieldType锛氱敤浜庡姩鎬佹洿鏀硅緭鍏ユ鐨勭被鍨嬶紝鍒囨崲涓?code>text鎴?code>password銆?/li>
• eyeIcon锛氳繑鍥炵溂鐫涘浘鏍囷紝鏍规嵁isPasswordVisible鐘舵€佸垏鎹€?/li>
• togglePasswordVisibility锛氱偣鍑诲浘鏍囨椂鍒囨崲isPasswordVisible鐨勫€笺€?/li>

涓夈€佸垏鎹㈠垪琛ㄩ」鐨勬樉绀虹姸鎬?/h2>

鍦ㄥ垪琛ㄤ腑浣跨敤鐪肩潧鍥炬爣鏉ユ帶鍒舵樉绀虹姸鎬侊紝鍙互閫氳繃Vue.js鐨勬潯浠舵覆鏌撳拰浜嬩欢澶勭悊鏉ュ疄鐜般€?/p>

<template>

  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <span v-if="item.visible">{{ item.text }}</span>
        <i @click="toggleItemVisibility(index)">{{ item.visible ? '馃憗锔?#39; : '馃檲' }}</i>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: [
        { text: 'Item 1', visible: true },
        { text: 'Item 2', visible: true },
        { text: 'Item 3', visible: true },
      ]
    }
  },
  methods: {
    toggleItemVisibility(index) {
      this.items[index].visible = !this.items[index].visible;
    }
  }
}
</script>

瑙ｉ噴锛?/p>

• items锛氫竴涓寘鍚垪琛ㄩ」鐨勬暟缁勶紝姣忎釜椤归兘鏈変竴涓?code>visible灞炴€ф潵鎺у埗鏄剧ず鐘舵€併€?/li>
• toggleItemVisibility锛氱偣鍑诲浘鏍囨椂鍒囨崲瀵瑰簲椤圭殑visible灞炴€с€?/li>

鍥涖€佹潈闄愭帶鍒朵腑鐨勫簲鐢?/h2>

鍦ㄥ悗鍙扮鐞嗙郴缁熶腑锛岀溂鐫涘浘鏍囧彲浠ョ敤鏉ヨ〃绀哄拰鎺у埗鏌愪簺鏁忔劅鍐呭鐨勫彲瑙佹€с€?/p>

<template>

  <div>
    <table>
      <thead>
        <tr>
          <th>鍚嶇О</th>
          <th>鐘舵€?lt;/th>
          <th>鎿嶄綔</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(user, index) in users" :key="index">
          <td>{{ user.name }}</td>
          <td>{{ user.status }}</td>
          <td>
            <i @click="toggleUserVisibility(index)">
              {{ user.visible ? '馃憗锔?#39; : '馃檲' }}
            </i>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      users: [
        { name: 'User 1', status: 'Active', visible: true },
        { name: 'User 2', status: 'Inactive', visible: true },
        { name: 'User 3', status: 'Active', visible: true },
      ]
    }
  },
  methods: {
    toggleUserVisibility(index) {
      this.users[index].visible = !this.users[index].visible;
    }
  }
}
</script>

瑙ｉ噴锛?/p>

• users锛氫竴涓寘鍚敤鎴蜂俊鎭殑鏁扮粍锛屾瘡涓敤鎴烽兘鏈変竴涓?code>visible灞炴€с€?/li>
• toggleUserVisibility锛氱偣鍑诲浘鏍囨椂鍒囨崲瀵瑰簲鐢ㄦ埛鐨?code>visible灞炴€с€?/li>

浜斻€佹渶浣冲疄璺?/h2>

涓轰簡纭繚鐪肩潧鍥炬爣鐨勫姛鑳藉湪椤圭洰涓湁鏁堝拰鐢ㄦ埛鍙嬪ソ锛屽缓璁伒寰互涓嬫渶浣冲疄璺碉細

1. 娓呮櫚鐨勫浘鏍囪璁?/strong>锛氱‘淇濈溂鐫涘浘鏍囧拰鍏剁姸鎬佸彉鍖栵紙濡傞棴鐪煎拰鐫佺溂锛夎冻澶熸竻鏅帮紝鐢ㄦ埛鑳藉蹇€熺悊瑙ｅ叾鍔熻兘銆?/li>
2. 鏃犻殰纰嶆€?/strong>锛氫负鐪肩潧鍥炬爣娣诲姞鍙闂€ф爣绛撅紙濡?code>aria-label锛夛紝浠ョ‘淇濆睆骞曢槄璇诲櫒鐢ㄦ埛鑳藉鐞嗚В鍏跺姛鑳姐€?/li>
3. 缁熶竴鐨勪氦浜掍綋楠?/strong>锛氬湪鏁翠釜椤圭洰涓繚鎸佺溂鐫涘浘鏍囩殑琛屼负涓€鑷达紝閬垮厤鐢ㄦ埛娣锋穯銆?/li>
4. 閫傚綋鐨勫弽棣?/strong>锛氬湪鐢ㄦ埛鐐瑰嚮鐪肩潧鍥炬爣鏃舵彁渚涢€傚綋鐨勮瑙夊弽棣堬紙濡傞鑹插彉鍖栨垨鍔ㄧ敾锛夛紝澧炲己鐢ㄦ埛浣撻獙銆?/li>

鎬荤粨鍜屽缓璁?/h2>

鐪肩潧鍥炬爣鍦╒ue.js椤圭洰涓槸涓€涓潪甯告湁鐢ㄧ殑UI鍏冪礌锛屼富瑕佺敤浜庤〃绀哄拰鎺у埗鍐呭鐨勫彲瑙佹€с€傞€氳繃鏈枃锛屾垜浠缁嗘帰璁ㄤ簡鐪肩潧鍥炬爣鐨勫嚑绉嶅父瑙佺敤閫旓紝鍖呮嫭鏄剧ず/闅愯棌瀵嗙爜銆佸垏鎹㈠垪琛ㄩ」鐨勬樉绀虹姸鎬佷互鍙婃潈闄愭帶鍒剁瓑銆傛垜浠繕鎻愪緵浜嗗叿浣撶殑瀹炵幇鏂规硶鍜屾渶浣冲疄璺碉紝甯姪寮€鍙戣€呭湪椤圭洰涓洿濂藉湴搴旂敤鐪肩潧鍥炬爣銆?/p>

涓轰簡杩涗竴姝ユ彁鍗囩敤鎴蜂綋楠岋紝寮€鍙戣€呭彲浠ヨ€冭檻浠ヤ笅寤鸿锛?/p>

1. 缁撳悎鍔ㄧ敾鏁堟灉锛氬湪鍒囨崲鍙鎬х姸鎬佹椂娣诲姞鍔ㄧ敾鏁堟灉锛屼娇鐢ㄦ埛浣撻獙鏇存祦鐣呫€?/li>
2. 鐢ㄦ埛娴嬭瘯锛氶€氳繃鐢ㄦ埛娴嬭瘯鏉ヨ瘎浼扮溂鐫涘浘鏍囩殑鍙敤鎬у拰鐢ㄦ埛鐞嗚В绋嬪害锛岃繘琛屽繀瑕佺殑璋冩暣銆?/li>
3. 鍝嶅簲寮忚璁?/strong>锛氱‘淇濈溂鐫涘浘鏍囧湪涓嶅悓璁惧鍜屽睆骞曞昂瀵镐笅閮借兘姝ｅ父鏄剧ず鍜屼娇鐢ㄣ€?/li>

閫氳繃杩欎簺鎺柦锛屾偍鍙互鍦╒ue.js椤圭洰涓洿濂藉湴鍒╃敤鐪肩潧鍥炬爣锛屾彁鍗囩敤鎴蜂綋楠屽拰浜や簰鏁堟灉銆?/p>

鏇村闂瓟FAQs锛?/strong>

1. Vue鐪肩潧鍥炬爣鏄粈涔堬紵

Vue鐪肩潧鍥炬爣鏄疺ue.js妗嗘灦涓殑涓€涓父瑙佸浘鏍囷紝閫氬父鐢ㄤ簬琛ㄧず鏌ョ湅鎴栧睍绀烘煇涓厓绱犵殑鍔熻兘銆傚畠鍙互鏄竴涓畝鍗曠殑鐪肩潧鍥炬爣锛屼篃鍙互鏄竴涓溂鐫涘姞涓婂叾浠栫鍙风殑缁勫悎鍥炬爣銆?/p>

2. Vue鐪肩潧鍥炬爣鍦╒ue.js涓殑浣跨敤鍦烘櫙鏈夊摢浜涳紵

Vue鐪肩潧鍥炬爣鍦╒ue.js涓殑浣跨敤鍦烘櫙闈炲父骞挎硾銆傚畠鍙互鐢ㄤ簬灞曠ず鎴栭殣钘忔晱鎰熶俊鎭紝姣斿瀵嗙爜杈撳叆妗嗘梺杈圭殑鐪肩潧鍥炬爣鍙互璁╃敤鎴烽€夋嫨鏄惁鏄剧ず瀵嗙爜銆傚畠杩樺彲浠ョ敤浜庡睍绀烘垨闅愯棌鍐呭涓殑璇︾粏淇℃伅锛屾瘮濡傚湪涓€涓垪琛ㄤ腑锛岀偣鍑荤溂鐫涘浘鏍囧彲浠ュ睍寮€鎴栨姌鍙犺椤圭殑璇︾粏鍐呭銆傚畠杩樺彲浠ョ敤浜庤〃绀烘煡鐪嬫洿澶氱浉鍏充俊鎭殑鍔熻兘锛屾瘮濡傚湪涓€涓崥瀹㈡枃绔犱腑锛岀偣鍑荤溂鐫涘浘鏍囧彲浠ュ睍绀鸿鏂囩珷鐨勯槄璇婚噺鍜岀偣璧炴暟銆?/p>

3. 濡備綍鍦╒ue.js涓娇鐢ㄧ溂鐫涘浘鏍囷紵

鍦╒ue.js涓娇鐢ㄧ溂鐫涘浘鏍囬潪甯哥畝鍗曘€備綘闇€瑕佸紩鍏ヤ竴涓€傚悎浣犻」鐩殑鍥炬爣搴擄紝姣斿Font Awesome鎴朚aterial Icons銆傜劧鍚庯紝鍦ㄩ渶瑕佷娇鐢ㄧ溂鐫涘浘鏍囩殑鍦版柟锛屼綘鍙互浣跨敤鐩稿簲鐨凥TML浠ｇ爜鎴朧ue缁勪欢鏉ユ彃鍏ョ溂鐫涘浘鏍囥€?/p>

渚嬪锛屽鏋滀綘浣跨敤Font Awesome锛屼綘鍙互鍦℉TML涓繖鏍锋彃鍏ヤ竴涓畝鍗曠殑鐪肩潧鍥炬爣锛?/p>

<i class="fa fa-eye"></i>

濡傛灉浣犱娇鐢╒ue缁勪欢锛屽湪Vue缁勪欢涓紝浣犲彲浠ヨ繖鏍蜂娇鐢ㄧ溂鐫涘浘鏍囷細

<template>
  <div>
    <font-awesome-icon icon="eye" />
  </div>
</template>

<script>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faEye } from '@fortawesome/free-solid-svg-icons'

export default {
  components: {
    FontAwesomeIcon
  },
  mounted() {
    library.add(faEye)
  }
}
</script>

浠ヤ笂鏄叧浜嶸ue鐪肩潧鍥炬爣鐨勪竴浜涘熀鏈俊鎭紝甯屾湜鑳藉浣犳湁鎵€甯姪銆傚鏋滀綘鏈夊叾浠栭棶棰橈紝娆㈣繋缁х画鎻愰棶锛?/p>