知道了vue的監(jiān)聽方法是什么這個問題就迎刃而解了！

方法watch()監(jiān)聽某個值（雙向綁定）的變化，從而達到change事件監(jiān)聽的效果

1.templat創(chuàng)建輸入框

<templat>

<div id="app">

<input type="text" v-model="items.text" ref="count"/>

<div? v-html="number"></div>

</div>

</templat>

2.script的watch中實現(xiàn)輸入框監(jiān)聽

<script>

? ? ? ? new Vue({

? ? ? ? ? ? el: '#app',

? ? ? ? ? ? data: {

? ? ? ? ? ? ? ? number: '100',

? ? ? ? ? ? ? ? items: {

? ? ? ? ? ? ? ? ? ? text:'',

? ? ? ? ? ? ? ? },

? ? ? ? ? ? },

? ? ? ? ? ? watch:{? //watch()監(jiān)聽某個值（雙向綁定）的變化，從而達到change事件監(jiān)聽的效果

? ? ? ? ? ? ? ? items:{

? ? ? ? ? ? ? ? ? ? handler:function(){

? ? ? ? ? ? ? ? ? ? ? ? var _this = this;

? ? ? ? ? ? ? ? ? ? ? ? var _sum = 100; //字體限制為100個

? ? ? ? ? ? ? ? ? ? ? ? _this.$refs.count.setAttribute("maxlength",_sum);

? ? ? ? ? ? ? ? ? ? ? ? _this.number= _sum- _this.$refs.count.value.length;

? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? deep:true

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? })

</script>

3.style中布局（省略代碼）

……