vue 实现金额数值 旁边的小眼睛图标

Vue可以通过使用`v-if`和`v-show`指令来实现金额数值旁边的小眼睛图标。

首先，在Vue组件的template中，可以通过在金额数值的旁边添加一个带有小眼睛图标的`<i>`元素来实现。例如：

<template>
  <div>
    <span>金额：</span>
    <span>{{ amount }}</span>
    <i class="eye-icon" v-if="showEyeIcon"></i>
  </div>
</template>

然后，在Vue组件的script中定义一个`data`属性来控制小眼睛图标的显示和隐藏。例如：

<script>
export default {
  data() {
    return {
      amount: 1000,
      showEyeIcon: false
    };
  }
};
</script>

在以上示例中，`showEyeIcon`属性初始值为`false`，表示小眼睛图标默认隐藏。

最后，通过添加事件监听器或者通过其他条件判断，在需要的情况下将`showEyeIcon`属性设为`true`，从而显示小眼睛图标。例如：

// 在某个事件处理方法中，根据条件判断是否显示小眼睛图标
toggleEyeIcon() {
  // 根据一些条件判断逻辑决定是否显示小眼睛图标
  this.showEyeIcon = true;
}

这样，当`showEyeIcon`属性为`true`时，`v-if`指令会将小眼睛图标添加到DOM中，并显示出来；当`showEyeIcon`属性为`false`时，`v-if`指令会将小眼睛图标从DOM中移除，从而隐藏起来。

通过上述步骤，即可在Vue中实现金额数值旁边的小眼睛图标。