html:
<textarea v-bind:maxlength="140" @input="descArea" v-model="introduct" name="abstract" id="abstract" placeholder="Add a bio to your profile"></textarea>
<span class="num-desc">{{Surplus}}/140</span>
script:
export default {
data(){
return{
Surplus:140,
introduct:''
}
},
methods:{
descArea(){
var textVal = this.introduct.length;
this.Surplus = 140 - textVal;
}
}
}
desc:
@input 监听input变化
v-model 实现数据的双向绑定