Vue-input-example

by d_matsuoka

HTML

<!-- FontAwesomeを使用 -->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- Vue -->
<div id="app">
  <div class="container">
    <input :type="inputType" id="password" class="input">
    <span class="input-icon">
      <span :class="iconType" @click="onClick"></span>
    </span>
  </div>
</div>

CSS

.container {
  width: 200px;
  margin: 30px;
}

.input {
  width: 100%;
  margin: 0px;
  padding-right: 5px;
}

.eye::after {
  font-family: 'FontAwesome';
  content: "\f06e";
}

.eye-slash::after {
  font-family: 'FontAwesome';
  content: "\f070";
}

.input-icon {
  position: relative;
  float: right;
  margin-top: -25px;
}

Vue

new Vue({
  el: "#app",
  data: {
		isChecked: false
  },
  computed: {
    inputType: function () {
      return this.isChecked ? "text" : "password";
    },
    iconType: function () {
      return this.isChecked ? "eye-slash" : "eye";
    }
  },
  methods: {
  	onClick: function() {
    	this.isChecked = !this.isChecked;
    }
  }
})