真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

Vue修飾符有哪些及怎么使用

這篇文章主要介紹了Vue修飾符有哪些及怎么使用的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue修飾符有哪些及怎么使用文章都會有所收獲，下面我們一起來看看吧。

專注于為中小企業(yè)提供成都做網(wǎng)站、成都網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)天元免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上1000家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

1.lazy

lazy修飾符作用是，改變輸入框的值時value不會改變，當(dāng)光標(biāo)離開輸入框時，v-model綁定的值value才會改變


{{value}}

data() {
 return {
  value: "111111"
 }
}

2.trim

trim修飾符的作用類似于JavaScript中的trim()方法，作用是把v-model綁定的值的首尾空格給過濾掉。


{{value}}

data() {
 return {
  value: "111111"
 }
}

3.number

number修飾符的作用是將值轉(zhuǎn)成數(shù)字，但是先輸入字符串和先輸入數(shù)字，是兩種情況


{{value}}

data() {
 return {
  value: "111111"
 }
}

先輸入數(shù)字的話，只取前面數(shù)字部分
先輸入字母的話，number修飾符無效

4.stop

stop修飾符的作用是阻止冒泡


    點(diǎn)擊

methods: { clickEvent(num) { // 不加 stop 點(diǎn)擊按鈕輸出 1 2 // 加了 stop 點(diǎn)擊按鈕輸出 1 console.log(num) } }

5.capture

事件默認(rèn)是由里往外冒泡，capture修飾符的作用是反過來，由外網(wǎng)內(nèi)捕獲


    點(diǎn)擊

methods: { clickEvent(num) { // 不加 capture 點(diǎn)擊按鈕輸出 1 2 // 加了 capture 點(diǎn)擊按鈕輸出 2 1 console.log(num) } }

6.self

self修飾符作用是，只有點(diǎn)擊事件綁定的本身才會觸發(fā)事件


    點(diǎn)擊

7.once

點(diǎn)擊 methods: { clickEvent(num) { // 不加 once 多次點(diǎn)擊按鈕輸出 1 // 加了 once 多次點(diǎn)擊按鈕只會輸出一次 1 console.log(num) } }

8.prevent

prevent修飾符的作用是阻止默認(rèn)事件（例如a標(biāo)簽的跳轉(zhuǎn)）

點(diǎn)我 methods: { clickEvent(num) { // 不加 prevent 點(diǎn)擊a標(biāo)簽先跳轉(zhuǎn)然后輸出 1 // 加了 prevent 點(diǎn)擊a標(biāo)簽不會跳轉(zhuǎn)只會輸出 1 console.log(num) } }

9.native

native修飾符是加在自定義組件的事件上，保證事件能執(zhí)行

10.left，right，middle

11.passive

當(dāng)我們在監(jiān)聽元素滾動事件的時候，會一直觸發(fā)onscroll事件，在pc端是沒啥問題的，但是在移動端，會讓我們的網(wǎng)頁變卡，因此我們使用這個修飾符的時候，相當(dāng)于給onscroll事件整了一個.lazy修飾符

12.camel

12.sync

當(dāng)父組件傳值進(jìn)子組件，子組件想要改變這個值時，可以這么做

13.keyCode

當(dāng)我們這么寫事件的時候，無論按什么按鈕都會觸發(fā)事件

那么想要限制成某個按鍵觸發(fā)怎么辦？這時候keyCode修飾符就派上用場了

關(guān)于“Vue修飾符有哪些及怎么使用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“Vue修飾符有哪些及怎么使用”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。