vue通過watch對(duì)input做字?jǐn)?shù)限定的方法
更新時(shí)間：2017年07月13日 17:00:32 作者：薛偉杰
本篇文章主要介紹了vue通過watch對(duì)input做字?jǐn)?shù)限定的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
之前寫了關(guān)于vue通過watch對(duì)input做字?jǐn)?shù)限定的方法，最近需要回顧，就順便發(fā)到隨筆上了
<div id="app"> <input type="text" v-model="items.text" ref="count"/> <div v-html="number"></div> /div>
new Vue({
el: '#app',
data: {
number: '100',
items: {
text:'',
},
},
watch:{ //watch()監(jiān)聽某個(gè)值（雙向綁定）的變化，從而達(dá)到change事件監(jiān)聽的效果
items:{
handler:function(){
var _this = this;
var _sum = 100; //字體限制為100個(gè)
_this.$refs.count.setAttribute("maxlength",_sum);
_this.number= _sum- _this.$refs.count.value.length;
},
deep:true
}
}
})
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue實(shí)現(xiàn)無(wú)限輪播效果時(shí)動(dòng)態(tài)綁定style失效的解決方法
最近在開發(fā)中遇到了一個(gè)新需求：列表輪播滾動(dòng),實(shí)現(xiàn)方式也有很多,比如使用第三方插件,但是由于不想依賴第三方插件,想自己實(shí)現(xiàn),于是我開始了嘗試,但是在這個(gè)過程中遇到了動(dòng)態(tài)綁定style樣式不生效,所以本文介紹了Vue實(shí)現(xiàn)無(wú)限輪播效果時(shí)動(dòng)態(tài)綁定style失效的解決方法2024-08-08
Vue3+Canvas實(shí)現(xiàn)簡(jiǎn)易的貪吃蛇游戲
貪吃蛇作為一個(gè)經(jīng)典的小游戲，是很多人兒時(shí)的記憶，當(dāng)時(shí)的掌機(jī)、諾基亞手機(jī)里面都有它的身影。本文將用Vue3?Canvas來(lái)復(fù)刻一下這款游戲，感興趣的可以了解一下2022-07-07
vue3項(xiàng)目使用pinia狀態(tài)管理器的使用
Pinia是一個(gè)專為Vue3設(shè)計(jì)的現(xiàn)代化狀態(tài)管理庫(kù),本文主要介紹了vue3項(xiàng)目使用pinia狀態(tài)管理器的使用,具有一定的參考價(jià)值,感興趣的可以了解一下2024-05-05
vue使用socket與服務(wù)端進(jìn)行通信的代碼詳解
這篇文章主要給大家介紹了vue如何使用socket與服務(wù)端進(jìn)行通信的相關(guān)資料,在Vue中我們可以將Websocket類封裝成一個(gè)Vue插件,以便全局使用,需要的朋友可以參考下2023-09-09
下面小編就為大家分享一篇基于vue.js中事件修飾符.self的用法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-02-02
利用vue-router實(shí)現(xiàn)二級(jí)菜單內(nèi)容轉(zhuǎn)換
這篇文章主要介紹了如何利用vue-router實(shí)現(xiàn)二級(jí)菜單內(nèi)容轉(zhuǎn)換,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
在Vue項(xiàng)目中優(yōu)化字體文件的加載和緩存的常用方法
在現(xiàn)代 Web 開發(fā)中,字體文件通常是頁(yè)面加載時(shí)間的重要因素之一,特別是在字體文件較大或網(wǎng)絡(luò)環(huán)境不佳的情況下,用戶體驗(yàn)可能會(huì)受到影響,本文將詳細(xì)探討如何在 Vue.js 項(xiàng)目中優(yōu)化字體文件的加載和緩存,以提高頁(yè)面性能,需要的朋友可以參考下2024-09-09
vue-virtual-scroll-list虛擬組件實(shí)現(xiàn)思路詳解
這篇文章主要給大家介紹了關(guān)于vue-virtual-scroll-list虛擬組件實(shí)現(xiàn)思路的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-02-02
vue任意關(guān)系組件通信與跨組件監(jiān)聽狀態(tài)vue-communication
這篇文章主要介紹了vue任意關(guān)系組件通信與跨組件監(jiān)聽狀態(tài)vue-communication，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
vue cli如何配置開發(fā)環(huán)境下的sourcemap
這篇文章主要介紹了vue cli如何配置開發(fā)環(huán)境下的sourcemap問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06