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 中,如果要向集合的頭部添加元素,可以使用 JavaScript 的 unshift 方法或 Vue 的 $set 方法,本文給大家介紹Vue 向集合的頭部添加元素的方法,感興趣的朋友一起看看吧2023-12-12
Vue實(shí)現(xiàn)動(dòng)態(tài)響應(yīng)數(shù)據(jù)變化
本篇文章主要介紹了Vue 動(dòng)態(tài)響應(yīng)數(shù)據(jù)變化，通過綁定數(shù)據(jù)即可以實(shí)時(shí)改變視圖顯示，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-04-04
這篇文章主要介紹了Vue文本模糊匹配功能如何實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
這篇文章主要為大家詳細(xì)介紹了vue版數(shù)字翻牌器的封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue3父子組件通信、兄弟組件實(shí)時(shí)通信方式
這篇文章主要介紹了vue3父子組件通信、兄弟組件實(shí)時(shí)通信方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue3項(xiàng)目中reset.scss模板使用導(dǎo)入
這篇文章主要為大家介紹了Vue3項(xiàng)目中reset.scss模板使用導(dǎo)入示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
詳解vue過度效果與動(dòng)畫transition使用示例
Vue 在插入、更新或者移除 DOM 時(shí)，提供多種不同方式的應(yīng)用過渡效果，Vue 提供了內(nèi)置的過渡封裝組件transition，該組件用于包裹要實(shí)現(xiàn)過渡效果的組件2021-10-10
這篇文章主要介紹了vue如何動(dòng)態(tài)配置ip與端口，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
本文主要介紹了vue中process.env的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
vue中實(shí)現(xiàn)在外部調(diào)用methods的方法(推薦)
下面小編就為大家分享一篇vue中實(shí)現(xiàn)在外部調(diào)用methods的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02