sutho100
4/5/2019 - 10:58 PM

max characters input vue.js

.vue
content_copyfile_download
<!DOCTYPE html>
<html>
	<head>
		<title>VUE</title>
		<meta http-equiv='content-type' content='text/html;charset=utf-8'>
		<meta name='viewport' content='width=device-width,initial-scale=1.0'>
		<style>
			h1,div,p,span{font-size:18px;font-family:helvetica}
			.warning{border:red solid 2px}
		</style>
		<script type='text/javascript' src='vue.js'></script>
	<body>	
		<div id='app'>
			<textarea v-bind:class='{warning:!remain}' v-model='message' v-on:input='check'></textarea>
			<p>{{remain}}/{{limit}}</p><!-- remain: how many characters left. limit: maximum character number-->
		</div>
	<script type='text/javascript'>
		var vm = new Vue({
			el:'#app',
			data:{
				message:'',
				limit:9,
			},
			computed:{
				remain:function(){
					return this.limit - this.message.length
				}
			},
			methods:{
				check:function(){
					if(this.remain<0){
						this.message = this.message.substr(0,this.limit)
					}
				}
			},
		})
	</script>	
	</body>
</html>