Vue實現(xiàn)動態(tài)顯示textarea剩余字數(shù)
更新時間：2017年05月22日 15:24:15 作者：HaiJing1995
這篇文章主要為大家詳細介紹了Vue實現(xiàn)動態(tài)顯示textarea剩余文字數(shù)量，具有一定的參考價值，感興趣的小伙伴們可以參考一下
Vue實現(xiàn)動態(tài)顯示textarea剩余文字數(shù)量，具體內(nèi)容如下
這里我們假設(shè)允許用戶輸入的最多數(shù)量為200個
html代碼如下：
<textarea maxlength="200" @input="descInput" v-model="desc" />
<span>{{remnant}}/200</span>
javascript代碼如下：
data(){
return{
remnant: 200
}
}
methods:{
descInput(){
var txtVal = this.desc.length;
this.remnant = 200 - txtVal;
}
}
css代碼在這里就不碼出來了~
實現(xiàn)效果如下：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了vue項目兼容ie11的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要給大家介紹了關(guān)于前端vuex中dispatch使用方法的相關(guān)資料,vuex的dispatch方法用于觸發(fā)一個action,以便更新state,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04
vue計算屬性computed--getter和setter用法
這篇文章主要介紹了vue計算屬性computed--getter和setter用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
本篇文章主要介紹了vue腳手架中配置Sass的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了Vue的三種路由模式總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了vue踩坑日記之params傳遞參數(shù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
詳解vue中在循環(huán)中使用@mouseenter 和 @mouseleave事件閃爍問題解決方法
這篇文章主要介紹了詳解vue中在循環(huán)中使用@mouseenter 和 @mouseleave事件閃爍問題解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
這篇文章主要為大家詳細介紹了如何Vue利用實現(xiàn)實時刷新時間的功能,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以了解下2023-12-12
這篇文章主要為大家詳細介紹了vue實現(xiàn)輪播圖幀率播放，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
vue數(shù)據(jù)監(jiān)聽解析Object.defineProperty與Proxy區(qū)別
這篇文章主要為大家介紹了vue數(shù)據(jù)監(jiān)聽解析Object.defineProperty Proxy源碼示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03