vue實時監控textarea框輸入字數

1.  實時監控當前輸入字數，直接使用keyup事件方法。

2.  給輸入框加maxlength屬性限制長度。

 代碼 

<template>
	<div class="conter">
		<p class="number">輸入字數：{{ conterNum }}/200</p>
		<textarea
			placeholder="點擊輸入詳細原因"
			id="textarea"
			maxlength="200"
			v-on:keyup="content()"
			v-on:compositionstart="importStart()"
			v-on:compositionend="importEnd()"
			v-model="payload.content" 
		></textarea>
		
	</div>
</template>

<script>
  export default {
	  onLoad:function(input){

	  },
	  data(){
		  return{
			  payload:{
				   content: '',
			  },
			
			 conterNum: 0,
			 cInput: false,
		  }
	  },
	  methods:{
		content() {
		 let self = this;
		 if (self.cInput == false) {
		 self.conterNum = self.payload.content.length;
		 }
		},
		importStart() {
		 this.cInput = true;
		},
		importEnd() {
		 this.cInput = false;
		 this.write();
		}

 }
}
</script>
<style>
	.conter{
		width:80%;
		margin: 0 auto;	
	}
	.number{
		width: 100%;
		text-align: right;
		margin-top: 20pux;
	}
	#textarea{
		border: 1px solid #f3f3f3;
		border-radius: 20upx;
		margin: 20upx 0 0 0;
		text-indent: 20upx;
		padding: 10px;
		
	}
</style>

 

效果