vue动态获取输入框的数字长度

 

 

html

<div class="letter_wirter">
<!--<textarea placeholder="请输入内容..." name="" rows="" cols="" maxlength="300" @input="descInput" v-model="desc"></textarea>
				<span class="num">{{txtVal}}/300</span>-->
				
				<!--或者-->
				<textarea placeholder="请输入内容..." name="" rows="" cols="" maxlength="300" v-model="desc"></textarea>
				<span class="num">{{txtVal = desc.length}}/300</span>
</div>

css

.letter_wirter{
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}
textarea {
    width: 100%;
    height: 10rem;
    padding: 5px;
    box-sizing: border-box;
    border: none;
}
.num {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

js

<script>
	export default {
		data() {
			return {
				txtVal: 0,
				desc:''
			}
		},
		components: {
			NavHeader
		},
		created:function(){
        },
		mounted: function() {
		},
		methods: {
        	descInput(){
				this.txtVal = this.desc.length;
			}	}
	}
</script>