91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Vue修飾符的問題有哪些

發布時間:2022-03-24 10:39:17 來源:億速云 閱讀:204 作者:iii 欄目:web開發

本文小編為大家詳細介紹“Vue修飾符的問題有哪些”,內容詳細,步驟清晰,細節處理妥當,希望這篇“Vue修飾符的問題有哪些”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學習新知識吧。

1.lazy

lazy修飾符作用是,改變輸入框的值時value不會改變,當光標離開輸入框時,v-model綁定的值value才會改變

<input type="text" v-model.lazy="value">
<div>{{value}}</div>

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

2.trim

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

<input type="text" v-model.trim="value">
<div>{{value}}</div>

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

3.number

number修飾符的作用是將值轉成數字,但是先輸入字符串和先輸入數字,是兩種情況

<input type="text" v-model.number="value">
<div>{{value}}</div>

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

先輸入數字的話,只取前面數字部分
先輸入字母的話,number修飾符無效

4.stop

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

<div @click="clickEvent(2)" style="width:300px;height:100px;background:red">
    <button @click.stop="clickEvent(1)">點擊</button>
</div>

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

5.capture

事件默認是由里往外冒泡,capture修飾符的作用是反過來,由外網內捕獲

<div @click.capture="clickEvent(2)" style="width:300px;height:100px;background:red">
    <button @click="clickEvent(1)">點擊</button>
</div>

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

6.self

self修飾符作用是,只有點擊事件綁定的本身才會觸發事件

<div @click.self="clickEvent(2)" style="width:300px;height:100px;background:red">
    <button @click="clickEvent(1)">點擊</button>
</div>
methods: {
 clickEvent(num) {
  // 不加 self 點擊按鈕輸出 1 2
  // 加了 self 點擊按鈕輸出 1 點擊div才會輸出 2
  console.log(num)
 }
}

7.once

once修飾符的作用是,事件只執行一次

<div @click.once="clickEvent(2)" style="width:300px;height:100px;background:red">
    <button @click="clickEvent(1)">點擊</button>
</div>

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

8.prevent

prevent修飾符的作用是阻止默認事件(例如a標簽的跳轉)

<a href="#" rel="external nofollow" @click.prevent="clickEvent(1)">點我</a>

methods: {
 clickEvent(num) {
  // 不加 prevent 點擊a標簽 先跳轉然后輸出 1
  // 加了 prevent 點擊a標簽 不會跳轉只會輸出 1
  console.log(num)
 }
}

9.native

native修飾符是加在自定義組件的事件上,保證事件能執行

執行不了

<My-component @click="shout(3)"></My-component>

可以執行

<My-component @click.native="shout(3)"></My-component>

10.left,right,middle

這三個修飾符是鼠標的左中右按鍵觸發的事件

<button @click.middle="clickEvent(1)"  @click.left="clickEvent(2)"  @click.right="clickEvent(3)">點我</button>

methods: {
 // 點擊中鍵輸出1
 // 點擊左鍵輸出2
 // 點擊右鍵輸出3
 clickEvent(num) {
  console.log(num)
 }
}

11.passive

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

<div @scroll.passive="onScroll">...</div>

12.camel

不加camel viewBox會被識別成viewbox
<svg :viewBox="viewBox"></svg>

加了canmel viewBox才會被識別成viewBox
<svg :viewBox.camel="viewBox"></svg>

12.sync

當父組件傳值進子組件,子組件想要改變這個值時,可以這么做

父組件里

<children :foo="bar" @update:foo="val => bar = val"></children>

子組件里

this.$emit("update:foo", newValue)

sync修飾符的作用就是,可以簡寫:

父組件里

<children :foo.sync="bar"></children>

子組件里

this.$emit("update:foo", newValue)

13.keyCode

當我們這么寫事件的時候,無論按什么按鈕都會觸發事件

<input type="text" @keyup="shout(4)">

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

<input type="text" @keyup.keyCode="shout(4)">

Vue提供的keyCode:

//普通鍵
.enter 
.tab
.delete //(捕獲“刪除”和“退格”鍵)
.space
.esc
.up
.down
.left
.right
//系統修飾鍵
.ctrl
.alt
.meta
.shift

例如:

按 ctrl 才會觸發

<input type="text" @keyup.ctrl="shout(4)">

也可以鼠標事件+按鍵

<input type="text" @mousedown.ctrl.="shout(4)">

可以多按鍵觸發 例如 ctrl + 67

<input type="text" @

讀到這里,這篇“Vue修飾符的問題有哪些”文章已經介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會,如果想了解更多相關內容的文章,歡迎關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

vue
AI

藁城市| 苗栗市| 峨眉山市| 宜君县| 丰镇市| 乌拉特前旗| 那曲县| 油尖旺区| 定日县| 桂林市| 建宁县| 唐河县| 本溪市| 池州市| 大竹县| 团风县| 泰宁县| 壶关县| 尚志市| 酉阳| 张家港市| 西青区| 固镇县| 深圳市| 财经| 承德市| 宜兴市| 新建县| 盐边县| 冕宁县| 望谟县| 莒南县| 青阳县| 东乡| 专栏| 信宜市| 福建省| 望都县| 石城县| 鹤庆县| 政和县|