Vue.js 事件處理器+表單

来源:https://www.cnblogs.com/chenyingying0/archive/2020/04/21/12742896.html
-Advertisement-
Play Games

Vue.js 事件處理器 <template> <div id="app"> <button v-on:click="fn">click me</button> </div> </template> <script> var count=1; export default { name: 'App' ...


Vue.js 事件處理器

<template>
  <div id="app">
    <button v-on:click="fn">click me</button>
  </div>
</template>

<script>
var count=1;
export default {
  name: 'App',
  data(){
    return{
      name:'cyy'
    }
  },
  methods:{
    fn(e){
      console.log(this.name);//cyy
      if(e){
        console.log(e.target.tagName);//BUTTON
      }
    }
  },
}

</script>

<style scoped>

</style>

 

除了直接綁定到一個方法，也可以用內聯 JavaScript 語句：

<template>
  <div id="app">
    <button v-on:click="fn('success')">click me</button>
    <button v-on:click="fn('fail')">click me</button>
  </div>
</template>

<script>
var count=1;
export default {
  name: 'App',
  data(){
    return{
      name:'cyy'
    }
  },
  methods:{
    fn(res){
      console.log(res);
    }
  },
}

</script>

<style scoped>

</style>

 

Vue.js 為 v-on 提供了事件修飾符來處理 DOM 事件細節，如：event.preventDefault() 或 event.stopPropagation()。

Vue.js通過由點(.)表示的指令尾碼來調用修飾符。

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<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>

 

Vue 允許為 v-on 在監聽鍵盤事件時添加按鍵修飾符：

<!-- 只有在 keyCode 是 13 時調用 vm.submit() -->
<input v-on:keyup.13="submit">

 

Vue 為最常用的按鍵提供了別名：

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 縮寫語法 -->
<input @keyup.enter="submit">

全部的按鍵別名：

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

 

<template>
  <div id="app">
    <input 
      v-on:keyup.enter="fn" 
      v-on:keyup.tab="fn"
      v-on:keyup.delete="fn"
      v-on:keyup.esc="fn"
      v-on:keyup.space="fn"
      v-on:keyup.up="fn"
      v-on:keyup.down="fn"
      v-on:keyup.left="fn"
      v-on:keyup.right="fn"
      v-on:keyup.ctrl="fn"
      v-on:keyup.alt="fn"
      v-on:keyup.shift="fn"
      v-on:keyup.meta="fn"
    />enter
  </div>
</template>

<script>
var count=1;
export default {
  name: 'App',
  data(){
    return{
      name:'cyy'
    }
  },
  methods:{
    fn(e){
      console.log(e.keyCode);
    }
  },
}

</script>

<style scoped>

</style>

 

 

當綁定 v-on:click 事件時，想傳入參數同時也傳入當前元素：

<template>
  <div id="app">
    <!-- 這裡必須使用$event -->
    <p @click="fn('cyy',$event)">bind methods fn</p>
  </div>
</template>

<script>
var count=1;
export default {
  name: 'App',
  data(){
    return{
      name:'cyy'
    }
  },
  methods:{
    fn(name,e){
      console.log(name);
      console.log(e.target);
    }
  },
}

</script>

<style scoped>

</style>

 

 

Vue.js 表單 用 v-model 指令在表單控制項元素上創建雙向數據綁定。

 

 

v-model 會根據控制項類型自動選取正確的方法來更新元素。

實例中演示了 input 和 textarea 元素中使用 v-model 實現雙向數據綁定：

<template>
  <div id="app">
    <input type="text" v-model="text">
    <p>{{text}}</p>

    <textarea cols="30" rows="3" v-model="textarea"></textarea>
    <p>{{textarea}}</p>
  </div>
</template>

<script>
var count=1;
export default {
  name: 'App',
  data(){
    return{
      text:'cyy',
      textarea:'this is a long text'
    }
  },
}

</script>

<style scoped>

</style>

 

 

覆選框如果是一個為邏輯值，如果是多個則綁定到同一個數組：

<template>
  <div id="app">
    <!-- 單個覆選框 -->
    <input type="checkbox" id="one" v-model="checked">
    <label for="#one">{{checked}}</label>
    <br>
    <br>

    <!-- 多個覆選框 -->
    <input type="checkbox" name="more" id="item1" value="item1" v-model="moreChecked">
    <label for="#item1">item1</label>
    <input type="checkbox" name="more" id="item2" value="item2" v-model="moreChecked">
    <label for="#item2">item2</label>
    <input type="checkbox" name="more" id="item3" value="item3" v-model="moreChecked">
    <label for="#item3">item3</label>
    <p>you checked:{{moreChecked}}</p>
  </div>
</template>

<script>
var count=1;
export default {
  name: 'App',
  data(){
    return{
      checked:true,
      moreChecked:[]
    }
  },
}

</script>

<style scoped>

</style>

 

 

以下實例中演示了單選按鈕的雙向數據綁定：

<template>
  <div id="app">
    <!-- 單選按鈕 -->
    <input type="radio" name="more" id="item1" value="item1" v-model="checked">
    <label for="#item1">item1</label>
    <input type="radio" name="more" id="item2" value="item2" v-model="checked">
    <label for="#item2">item2</label>
    <input type="radio" name="more" id="item3" value="item3" v-model="checked">
    <label for="#item3">item3</label>
    <p>you checked:{{checked}}</p>
  </div>
</template>

<script>
var count=1;
export default {
  name: 'App',
  data(){
    return{
      checked:'item1',
    }
  },
}

</script>

<style scoped>

</style>

 

 

以下實例中演示了下拉列表的雙向數據綁定：

<template>
  <div id="app">
    <select name="choose" id="choose" v-model="choose">
      <option value="">請選擇</option>
      <option value="item1">item1</option>
      <option value="item2">item2</option>
    </select>
    <p>you choose:{{choose}}</p>
  </div>
</template>

<script>
var count=1;
export default {
  name: 'App',
  data(){
    return{
      choose:'',
    }
  },
}

</script>

<style scoped>

</style>

 

 

.lazy

在預設情況下， v-model 在 input 事件中同步輸入框的值與數據，但你可以添加一個修飾符 lazy ，從而轉變為在 change 事件中同步：

<template>
  <div id="app">
    <input type="text" v-model="text">
    <p>{{text}}</p>

    <!-- 在 "change" 而不是 "input" 事件中更新 -->
    <input type="text" v-model.lazy="text2">
    <p>{{text2}}</p>
  </div>
</template>

<script>
var count=1;
export default {
  name: 'App',
  data(){
    return{
      text:'',
      text2:''
    }
  },
}

</script>

<style scoped>

</style>

 

如果想自動將用戶的輸入值轉為 Number 類型（如果原值的轉換結果為 NaN 則返回原值），可以添加一個修飾符 number 給 v-model 來處理輸入值：

這通常很有用，因為在 type="number" 時 HTML 中輸入的值也總是會返回字元串類型。

<template>
  <div id="app">
    <input type="number" v-model.number="num">
    <p>{{num}}</p>
  </div>
</template>

<script>
var count=1;
export default {
  name: 'App',
  data(){
    return{
      num:0
    }
  },
}

</script>

<style scoped>

</style>

 

如果要自動過濾用戶輸入的首尾空格，可以添加 trim 修飾符到 v-model 上過濾輸入：

<template>
  <div id="app">
  
    <input type="text" v-model="text">
    <p>{{text}}</p>

    <!-- 過濾空格 -->
    <input type="text" v-model.trim="text2">
    <p>{{text2}}</p>
  </div>
</template>

<script>
var count=1;
export default {
  name: 'App',
  data(){
    return{
      text:'',
      text2:''
    }
  },
}

</script>

<style scoped>

</style>

 

 我好像沒成功……

 

全選與取消全選：

<template>
  <div id="app">
  
    <input type="checkbox" name="check" id="check" v-model="checked" @change="changeAll()">{{checked?'取消全選':'全選'}}
    <br/>
    <input type="checkbox" name="mylist" value="item1" id="item1" v-model="checkedList">
    <label for="#item1">item1</label>
    <input type="checkbox" name="mylist" value="item2" id="item2" v-model="checkedList">
    <label for="#item2">item2</label>
    <input type="checkbox" name="mylist" value="item3" id="item3" v-model="checkedList">
    <label for="#item3">item3</label>

  </div>
</template>

<script>
var count=1;
export default {
  name: 'App',
  data(){
    return{
      checked:false,
      checkedList:[],
      checkedArr:['item1','item2','item3']
    }
  },
  methods:{
    changeAll(){
      if(this.checked){
        this.checkedList=this.checkedArr;
      }else{
        this.checkedList=[];
      }
    }
  },
  watch:{
    checkedList(){
      if(this.checkedList.length===this.checkedArr.length){
        this.checked=true;
      }else{
        this.checked=false;
      }
    }
  }
}

</script>

<style scoped>

</style>

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • PWA入門 -- H5時代原生APP
    本文是一個PWA的入門教程，也算是一個introduction(導讀)，不會太深入 主要聊聊三個重點: PWA的本質，構成PWA的兩個文件，PWA APP如何更新 PWA的本質 Q: 網站和原生app在存儲上的本質區別是什麼？ A: 網站中使用的素材都是通過請求實時獲取的, app中使用的素材都是本 ...
  • Vue.js 組件+ 自定義指令+路由
    Vue.js 組件 組件（Component）是 Vue.js 最強大的功能之一。 組件可以擴展 HTML 元素，封裝可重用的代碼。 <template> <div id="app"> <!-- 使用自定義組件 --> <runoob></runoob> </div> </template> <sc ...
  • 【Vue】基礎（虛擬DOM & 響應式原理）
    Vue虛擬DOM是實現響應式的核心，弄清楚虛擬DOM和Vue響應式原理，對寫代碼有參考作用 ...
  • 各個階段的前端得會哪些“特殊”技能？
    學web前端的你現在出於那個階段呢？ 入門：能做東西出來了。 合格：能做出優秀的東西來了。 大牛：不光做東西還會吹牛的了。 哈哈哈，不開玩笑了，下文為你詳細說明： 入門web前端工程師要求： 能比較熟練的使用HTML+CSS 寫出不考慮相容性的頁面，然後還能用jquery來實現頁面的比較簡單的DOM ...
  • 安裝快應用開發環境，構建第一個快應用Hello World —— H5/小程式/Vue前端開發者必讀
    簡介 1.硬體準備； 2.聯盟快應用IDE安裝； 3.華為快應用IDE安裝； 4.安裝Node.js環境; 5.激活手機開發者調試模式； 6.手機端工具安裝; 7.Hello World; 8.快應用高效開發相關資源。 一、硬體準備 以我的開發環境為例： MacBook Pro筆記本電腦一臺，其它筆 ...
  • js中位元組B轉化成KB，MB，GB
    function change(limit){ var size = ""; if(limit < 0.1 * 1024){ //小於0.1KB，則轉化成B size = limit.toFixed(2) + "B" }else if(limit < 0.1 * 1024 * 1024){ //小於 ...
  • 高度自適應
    高度自適應第一種情況 1.高度不去設置，或者高度設置auto 內容撐開父元素的高度。2.內容撐開父元素的高度 -> 最小高度的設置 min-height3.浮動元素添加高度自適應 -> 添加浮動元素的父元素沒有高度，會出現高度塌陷 解決高度塌陷的方法 (1)給出現高度塌陷的元素添加：overflow ...
  • 如何改變地址欄參數不跳轉頁面或刷新頁面
    使用 history.replaceState(null, "title","arg"); 例如： history.replaceState(null, "",'?category_id=0'+'&page='+pageIndex); ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類