快捷導(dǎo)航

Vue實(shí)現(xiàn)動(dòng)態(tài)顯示textarea剩余字?jǐn)?shù)

更新時(shí)間：2017年05月22日 15:24:15 作者：HaiJing1995

這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)動(dòng)態(tài)顯示textarea剩余文字?jǐn)?shù)量，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

Vue實(shí)現(xiàn)動(dòng)態(tài)顯示textarea剩余文字?jǐn)?shù)量，具體內(nèi)容如下

這里我們假設(shè)允許用戶輸入的最多數(shù)量為200個(gè)

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代碼在這里就不碼出來了~

實(shí)現(xiàn)效果如下：

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue全局混入之狀態(tài)判斷是否執(zhí)行點(diǎn)擊
這篇文章主要介紹了vue全局混入之狀態(tài)判斷是否執(zhí)行點(diǎn)擊方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue中使用heatmapjs的示例代碼（結(jié)合百度地圖）
這篇文章主要介紹了vue中使用heatmapjs的示例代碼（結(jié)合百度地圖），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
vue-element-admin?登陸及目錄權(quán)限控制的實(shí)現(xiàn)
本文主要介紹了vue-element-admin?登陸及目錄權(quán)限控制的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-04-04
Vue OptionsAPI與CompositionAPI的區(qū)別與使用介紹
OptionsAPI和CompositionAPI是Vue.js框架中兩種不同的組件編寫方式,OptionsAPI通過對象字面量定義組件,以屬性分隔不同功能,響應(yīng)式數(shù)據(jù)通過data屬性定義,本文給大家介紹Vue OptionsAPI與CompositionAPI的區(qū)別,感興趣的朋友一起看看吧
2024-10-10
vue中安裝使用cesium方式(親測可用)
這篇文章主要介紹了vue中安裝使用cesium方式(親測可用)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
Vue Router實(shí)現(xiàn)多層嵌套路由的導(dǎo)航的詳細(xì)指南
在 Vue 應(yīng)用中,使用 Vue Router 可以輕松實(shí)現(xiàn)多層嵌套路由的導(dǎo)航,嵌套路由允許你創(chuàng)建一個(gè)多層次的 URL 結(jié)構(gòu),這在構(gòu)建具有復(fù)雜導(dǎo)航結(jié)構(gòu)的應(yīng)用程序時(shí)非常有用,需要的朋友可以參考下
2024-10-10
vue實(shí)現(xiàn)彈窗翻頁多選效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)彈窗翻頁多選效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
在vue中使用screenfull?依賴,實(shí)現(xiàn)全屏組件方式
這篇文章主要介紹了在vue中使用screenfull?依賴，實(shí)現(xiàn)全屏組件方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
Vue如何動(dòng)態(tài)給id設(shè)置style樣式
這篇文章主要介紹了Vue如何動(dòng)態(tài)給id設(shè)置style樣式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
Vue 中使用 CSS Modules優(yōu)雅方法
這篇文章主要介紹了Vue 中使用 CSS Modules優(yōu)雅方法,本文文字結(jié)合實(shí)例代碼的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2018-04-04