1. 程式人生 > >詳細解析vue中的修飾符

詳細解析vue中的修飾符

1.表單輸入框input中的修飾符

.lazy:加lazy修飾符的區別相當於在輸入後失去焦點或者摁了enter鍵檢視才更新。不加lazy則是在keyup就更新,如下:

<input v-model.lazy="msg" >
<h3>{{msg}}</h3>

.number:把輸入的數值從字串或其他型別轉換為number型別,我們可以如下應正一下,當沒輸入值時,p標籤顯示為string,輸入值後顯示為number

<input v-model.number="msg" >
<h3>{{msg}}</h3>
<p>{{msg1}}</p>

<script>
  data:{
   msg:'',
   msg1:''
},
 computed:{
	msg1:function(){
		return typeof(this.msg)
	}
}

</script>

.trim:自動過濾使用者輸入的首尾空格(中間空格過濾不了)

<input v-model.trim="msg" />

2.事件中的修飾符

<!-- 阻止單擊事件冒泡,當點選box2時就不會觸發box1的點選事件,若不加則會觸發 -->
<div class="box1" @click="btn">
	<div class="box2" @click.stop="btn1"></div>
</div>
<!-- 提交事件不再過載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯,阻止預設事件  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 新增事件偵聽器時使用事件捕獲模式,先執行外層盒子事件,再執行裡面盒子事件 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當事件在該元素本身(而不是子元素)才去執行 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能點選一次,2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

3.按鍵修飾符

只有在按enter鍵時呼叫submit

<input v-on:keyup.enter="submit">

全部的按鍵別名:

  • .enter
  • .tab
  • .delete (捕獲 "刪除" 和 "退格" 鍵)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
  • .ctrl
  • .alt
  • .shift
  • .meta

相關推薦

詳細解析vue修飾

1.表單輸入框input中的修飾符 .lazy:加lazy修飾符的區別相當於在輸入後失去焦點或者摁了enter鍵檢視才更新。不加lazy則是在keyup就更新,如下: <input v-model.lazy="msg" > <h3>{{msg}}&

Koltin——最詳細的可見性修飾詳解

如果 子類 但是 同一文件 文章 f2c -o 系列 star 在Kotlin中,不管是類,對象,接口,構造函數,函數,屬性及其設置器都具有可見性修飾符。Kotlin中的可見性修飾符共四種。即public、protected、private、internal。在不同的場景

Vue串轉換html代碼方法

blog pre htm 支付功能 支付 class spa col 事件 最近使用支付功能調用支付寶接口,然後返回的form表單放在div裏面,並沒有轉換成想要的html代碼,而是將整個form表單的內容完整顯示了出來,顯然不是我們要的結果! 最後查找了一下vue

java修飾作用範圍

adding padding ble pad order 級別 pac borde cin 訪問級別 訪問控制修飾符 同類 同包 子類 不同包 公開 public √ √ √ √ 受保護 protected √ √ √ × 默認 defult(沒有修飾

Vue—事件修飾

Vue事件修飾符 Vue.js 為 v-on 提供了事件修飾符來處理 DOM 事件細節,如:event.preventDefault() 或 event.stopPropagation()。 Vue.js通過由點 (.) 表示的指令字尾來呼叫修飾符。 .stop.prevent.capture.self

請簡要敘述下Java修飾的作用域及可見性?

public:修飾的成員可以在任何範圍內直接訪問,只是一種最寬鬆的訪問控制等級。需要注意的,所謂的直接訪問仍需要先建立或獲得一個相應類的物件然後才可以使用”物件名.成員“的方式訪問其屬性或呼叫其方法,但是出於資訊封裝和隱藏的需要一般不提倡把成員宣告為public的,而構造方法和需要外界直

詳細解析js的混合方式構造物件(構造加屬性,原型加方法)

詳細解析混合方式構造物件 js程式碼如下 function CreatePerson(name, qq) //用建構函式加屬性 { //原料 +new 系統偷偷替咱們做 //var obj=ne

深入解析Vuewatch的高階用法

我們通過例項程式碼給大家分享了Vue中watch的高階用法,對此知識點有需要的朋友可以跟著學習下。 假設有如下程式碼: <div> <p>FullName: {{fullName}}</p> <p>FirstName: <i

(轉)詳細解析Java抽象類和介面的區別

原文地址:https://zhuanlan.zhihu.com/p/50989401 在Java語言中, abstract class 和interface 是支援抽象類定義的兩種機制。正是由於這兩種機制的存在,才賦予了Java強大的 面向物件能力。abstract class和interface之間在對於

深入解析Vue的computed工作原理

我們通過實現一個簡單版的和Vue中computed具有相同功能的函式來了解computed是如何工作的。 JS屬性: JavaScript有一個特性是 Object.defineProperty ,它能做很多事,但我在這篇文章只專注於這個方法中的一個: var perso

5.vue事件修飾

1.js檔案:     //在使用vue之前必須例項化vue物件 new Vue({     /*el:指element  需要獲取的元素,一定是html中根容器元素         以後所有的操作均是在這個根

從原始碼裡解析vue的nextTick的用法

今天做了一個需求,場景是這樣的: 在頁面拉取一個介面,這個介面返回一些資料,這些資料是這個頁面的一個浮層元件要依賴的,然後我在介面一返回資料就展示了這個浮層元件,展示的同時,上報一些資料給後臺(這些資料就是父元件從介面拿的),這個時候,神奇的事情發生了,雖然我拿到資料了,但是浮層展現的時候,這些資料還未更新到

vue sync修飾

我們先看下官方文件 vue 修飾符sync vue 在 2.0 釋出之後的實際應用中,我們發現 .sync 還是有其適用之處,比如在開發可複用的元件庫時。我們需要做的只是讓子元件改變父元件狀態的程式碼更容易被區分。從 2.3.0 起我們重新引入了 .sync 修飾符,但是這次它只

詳細解析Java抽象類和介面的區別

  在abstract class方式中,Demo可以有自己的資料成員,也可以有非 abstract的成員方法,而在interface方式的實現中,Demo只能夠有靜態的不能被修改的資料成員(也就是必須是static final 的,不過在interface中一般不定義資料成員),所有的成員方法都是abstr

C#修飾static的深入理解

class Value{ static int c=0; static void inc(){ c++;  }}class Count{  public static void prt(String s){    System.out.println(s);  }  public static void ma

詳細解析Shell的IFS變數

題圖:Photo by Jacob Postuma on Unsplash 本文原創釋出於微信公眾號“洛奇看世界”,一個大齡2b碼農的世界 這裡的Shell主要指bash,學習bash的前前後後在IFS變數上吃了不少苦頭,雖然花了不少時間,

Java修飾的作用域及可見性

java中,針對不同的修飾詞,類及其類中的方法、域都有不同的可見性。以下為針對java中可見性的幾點總結。 1.java中的預設包(這個包是沒有名稱的),對於任何修飾詞來說,其中的內容只能對其包內類為可見。 2.對於java中的非預設包中的內容,各修修飾詞及其

Java修飾的先後順序private public abstract static final 等

The Java Language Specification recommends listing modifiers in the following order:1. Annotations2. public3. protected4. private5. abstra

關於vue使用修飾.sync修飾實現雙向資料繫結沒效果的一個原因(坑)

我們知道元件是單項的,但是有時候需要雙向,這時候我們可以使用.sync修飾符,但今天遇到一個坑,一直不成功,花了半小時試出來的。。。。在程式設計的時候我們很習慣冒號後面跟著空格。而.sync雙向繫結需要子元件顯性觸發this.$emit('update:foo', newVa

vue事件修飾詳解

        vue提倡的是在方法中只有對資料的處理,所以提供了事件修飾符用於DOM的事件處理,常用的事件修飾符有以下幾個:(1). stop:阻止冒泡(通俗講就是阻止事件向上級DOM元素傳遞)                        點選內層div的結果: