More than 3 years have passed since last update.

vue.js で文字数を超えたら、警告文を表示する

Vue.js

Posted at 2021-05-21

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>算出プロパティ</title>
</head>
<body>
	<div id="app">
		<input type="text" v-model="inputCharactors">
		<p v-if="inputNumber < 10">必要な文字数は{{ needNumbers }}文字です</p>
		<p v-else style="color :rgb(255, 30, 30);">10文字以上入力されています</p>
	</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
  el: '#app',
  data: {
  	inputCharactors: ''	
  },
  computed:{
  	inputNumber : function (){
      //文字の数を取得する
  		return this.inputCharactors.length;
  	},
  	needNumbers : function(){
      //10文字までに必要な残りの文字数を表示する
  		return 10 - this.inputNumber;
  	}
  }

})
</script>	
</body>
</html>

conputedは値を監視するときに、ifバインドと合わせるいい感じになるっぽい。
関数として呼び出す必要がなくて、常に働いてくれてすごいです。

参考
https://reffect.co.jp/vue/vue-js-basic

本当にこのサイトはわかりやすい

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up