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