vue 指令與過濾器

来源:https://www.cnblogs.com/LuBingBing/archive/2022/11/23/16920213.html
-Advertisement-
Play Games

vue 指令與過濾器 內容渲染指令 內容渲染指令是用來輔助開發者渲染 DOM 元素的文本內容。常用的內容渲染指令有3種。 v-text 示例 <div id="app"> <!-- 把 username 對應的值,渲染到第一個 p 標簽中 --> <p v-text="username"></p> ...


vue 指令與過濾器

內容渲染指令

內容渲染指令是用來輔助開發者渲染 DOM 元素的文本內容。常用的內容渲染指令有3種。

v-text

示例

<div id="app">
    <!-- 把 username 對應的值,渲染到第一個 p 標簽中 -->
    <p v-text="username"></p>
    <!-- 把 gender 對應的值,渲染到第二個 p 標簽中 -->
    <!-- 註意:第二個 p 標簽中,預設文本會被gender值覆蓋 -->
    <p v-text="gender">性別</p>
</div>
<!-- 導入 vue 的庫文件 -->
    <script src="./lib/vue.js v2.7.13.js"></script>
//創建vue 的實例對象
const vm = new Vue({
    //el 屬性是固定寫法,表示當前 vm 實例要控制的區域,接收的是一個選擇器
    el: '#app',
    // data 對象就是要渲染到頁面上的數據
    data: {
        username: 'zs',
        gender: '男'
    }
});

插值表達式 {{}}雙大括弧

在實際開發中應用較多,不會覆蓋原有渲染
示例

<div id="app">
    <p>姓名:{{username}}</p>
</div>
const vm = new Vue({
    //el 屬性是固定寫法,表示當前 vm 實例要控制的區域,接收的是一個選擇器
    el: '#app',
    // data 對象就是要渲染到頁面上的數據
    data: {
        username: 'zs',
        gender: '男',
    }
});

v-html

可以把帶標簽的的字元串,渲染成真正的html 內容
示例

<div id="app">
    <div v-html="info"></div>
</div>
const vm = new Vue({
            //el 屬性是固定寫法,表示當前 vm 實例要控制的區域,接收的是一個選擇器
            el: '#app',
            // data 對象就是要渲染到頁面上的數據
            data: {
                info: '<h4 style="color: red; font-weight: bold;"> 歡迎學習 vuejs</h4>'
            }
        });

屬性綁定指令

註意:插值表達式只能用在元素內容節點中,不能用在元素的屬性節點

動態綁定屬性值 v-bind

在屬性前加屬性指令 v-bind: 為元素動態綁定值,vue 規定 v-bind 可以簡寫成: ,示例

<input type="text" v-bind:placeholder="tips">
<img :src="photo" style="width: 150px;">

使用 javascript 表達式

在 vue 提供的模板渲染語法中,除了支持綁定簡單的數據值之外,還支持 javascript 表達式的運算,例如

{{ number + 1 }};
{{ ok ? 'YES' : 'NO'}};
{{ message.split('').reverse().join('')}};

<div v-bind:id="'list-' + id"></div>

註意在簡寫 v-bind 屬性綁定期間,如果綁定內容需要進行動態拼接,則字元串外應包裹單引號,例如

<div :title="'box' + index">!!!!!</div>

事件綁定指令

v-on 綁定事件

v-on 綁定事件指令,輔助程式員為DOM元素綁定監聽事件,格式如下

<p>count的值是: {{count}}</p>
        <!-- 語法格式為 v-on:事件名稱="事件處理函數的名稱" -->
        <button v-on:click="addCount">+1</button>

 const vm = new Vue({
            //el 屬性是固定寫法,表示當前 vm 實例要控制的區域,接收的是一個選擇器
            el: '#app',
            // data 對象就是要渲染到頁面上的數據
            data:{
                count: 0,
            },
            // 定義事件的處理函數
            methods:{
                add: function () {
                    // console.log(vm);
                    // vm.count += 1; 
		    // this === vm 
                    this.count += 1;
                }
		// 也可簡寫成
                add () {
                    // console.log(vm);
                    this.count += 1;
                }
            }
        });

v-on: 也可以簡寫為 @

<button @click="sub">-1</button>

註意:原生 DOM 對象有 onclick、oninput、onkeydown 等原生事件,替換成 vue 的事件綁定形式後,分別為: v-on:click 、v-on:input、v-on:keydown

事件對象

vue 提供了內置固定的變數 $event ,它就是原生 DOM 的事件對象 e

<!-- 如果 count 為偶數,則按鈕背景變為藍色,否則,取消背景 -->
<!-- vue 提供了內置固定的變數 $event ,它就是原生 DOM 的事件對象 e-->
        <button @click="add(1, $event)">+n</button>
const vm = new Vue({
            //el 屬性是固定寫法,表示當前 vm 實例要控制的區域,接收的是一個選擇器
            el: '#app',
            // data 對象就是要渲染到頁面上的數據
            data:{
                count: 0,
            },
            // 定義事件的處理函數
            methods:{
                add (n, e) {
                    this.count += 1;
                    // 判斷 this.count 的值是否為偶數
                    if (this.count%2 === 0) {
                        //偶數
                        e.target.style.backgroundColor = 'blue';
                        console.log(e);
                    } else {
                        // 奇數
                        e.target.style.backgroundColor = '';
                    }
                }
              
            }
          
        });

事件修飾符

在事件處理函數中調用 event.preventDefault() event.stopPROpagation() 是非常常見的需求。因此, vue 提供了事件修飾的概念,輔助程式員更方便的**對事件的觸發進行控制。常用5種修飾符如下:

事件修飾符 說明
.prevent 阻止預設行為(例如:阻止 a 鏈接跳轉、阻止表單提交等)
.stop 阻止事件冒泡
.capture 以捕獲模式觸發當前的事件處理函數
.once 綁定事件只觸發一次
.self 只有在 event.target 是當前元素自身時觸發事件處理函數

示例1:

<a href="http://www.baidu.com" @click.prevent="show">跳轉到百度首頁</a>
const vm = new Vue({
            //el 屬性是固定寫法,表示當前 vm 實例要控制的區域,接收的是一個選擇器
            el: '#app',
            // data 對象就是要渲染到頁面上的數據
            data:{},
            // 定義事件的處理函數
            methods:{
                show () {
		    // e.preventDefault();
                    console.log("點擊了 a 鏈接");
                }
            } 
        });

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

-Advertisement-
Play Games
更多相關文章
  • 前幾天,Gartner 發佈了企業機構在2023年需要探索的十大戰略技術趨勢。 Gartner 傑出研究副總裁 Frances Karamouzis 表示:“為了在經濟動蕩時期增加企業機構的盈利,首席信息官和IT高管必須在繼續加快數字化轉型的同時,將目光從節約成本轉向新的卓越運營方式。Gartner ...
  • ChunJun(原FlinkX)是一個基於 Flink 提供易用、穩定、高效的批流統一的數據集成工具。2018年4月,秉承著開源共用的理念,數棧技術團隊在github上開源了FlinkX,承蒙各位開發者的合作共建,FlinkX得到了快速發展。 兩年後的2022年4月,技術團隊決定對FlinkX進行整 ...
  • 首發微信公眾號:SQL資料庫運維 原文鏈接:https://mp.weixin.qq.com/s?__biz=MzI1NTQyNzg3MQ==&mid=2247485212&idx=1&sn=450e9e94fa709b5eeff0de371c62072b&chksm=ea37536cdd40da7 ...
  • 一、SQL與NoSQL ​ 資料庫服務端可以服務多種類型的客戶端 ​ 客戶端可以是自己開發的,也可以是python代碼編寫的,也可以是其他編程語言編寫的 SQL 操作關係型數據的語言 NoSQL 操作非關係型數據的語言 須知: ​ 1、SQL有時又也指代關係型資料庫 ​ 2、NoSQL有時候也指代非 ...
  • Android網路請求(終) 網路請求框架Retrofit Retrofit底層是由OkHttp封裝的,Retrofit對於註解的使用十分頻繁,所以不瞭解註解的同學們可以去查查資料什麼的。 這裡有一個小細節,要使用Retrofit至少需要jdk1.8以上和Android API 21以上 Andro ...
  • Android網路請求(4) 網路請求框架Volley Volley是Google在2013年5月15日到17日在舊金山Moscone中心舉辦網路開發者年會中推出的Android非同步網路載入框架和圖片載入框架,它特別適合數據體量小且通訊頻繁的網路操作場景,而Android開發中大多數場景都是這樣的, ...
  • 華為HMS Core音頻編輯服務(Audio Editor Kit)依托自身AI技術的研發優勢,上線全新的歌聲合成音色及伴奏,給音視頻創作者提供更多的創作可能。在短視頻場景中,用戶自定義歌詞的歌聲結合視頻讓用戶感受到身臨其境,自由表達自己的情緒;在虛擬偶像場景中,歌聲合成功能賦予虛擬歌手們演唱風格各 ...
  • Vue CartView.vue script 數組的filter函數需要return顯式返回布爾值,該方法得到一個新數組。 使用Vuex store的modules方式,註意讀取狀態的方式 this.$store.state.cart.items 刷新頁面後state狀態還原,需要用session ...
一周排行
    -Advertisement-
    Play Games
  • public static void GetRegistData() { string name = "huishuangzhu"; //搜索到註冊表根目錄 RegistryKey hkml = Registry.ClassesRoot; //搜索到註冊表根目錄下的XXX文件夾。 RegistryK ...
  • 用acme.sh自動部署功能變數名稱證書 安裝ACME 目前使用量最大的免費SSL證書就是Let’s Encrypt,自2018-03開始,Let’s Encrypt官方發佈上線了免費的SSL泛功能變數名稱證書,目前通過DNS方式獲取比較快,國內可以通過鵝雲的DNSPod功能變數名稱API或者貓雲功能變數名稱API自動簽發Let’ ...
  • 經常看到有群友調侃“為什麼搞Java的總在學習JVM調優?那是因為Java爛!我們.NET就不需要搞這些!”真的是這樣嗎?今天我就用一個案例來分析一下。 昨天,一位學生問了我一個問題:他建了一個預設的ASP.NET Core Web API的項目,也就是那個WeatherForecast的預設項目模 ...
  • 1、環境搭建 1.1 依賴 <!-- nacos註冊中心 註解 @EnableDiscoveryClient --> <dependency> <groupId>com.alibaba.cloud</groupId> <artifactId>spring-cloud-starter-alibaba- ...
  • ULID:Universally Unique Lexicographically Sortable Identifier(通用唯一詞典分類標識符) UUID:Universally Unique Identifier(通用唯一標識符) 為什麼不選擇UUID UUID 目前有 5 個版本: 版本1: ...
  • 虛基類/抽象類 抽象類:有純虛函數的類 虛繼承 通過修飾繼承方式, 如代碼2是虛繼承,被虛繼承的類稱為虛基類 虛繼承派生類的記憶體佈局方式 先是vbptr => 派生類的數據 =>基類的數據 , 對比代碼1和代碼2,發現原本基類數據在前面,派生類數據在後面,但是在虛繼承的時候 基類數據方式放到了後面, ...
  • 下麵給出 Kafka 一些重要概念,讓大家對 Kafka 有個整體的認識和感知,後面還會詳細的解析每一個概念的作用以及更深入的原理 • Producer:消息生產者,向 Kafka Broker 發消息的客戶端。 • Consumer:消息消費者,從 Kafka Broker 取消息的客戶端。 • ...
  • 前面介紹了對稱加密演算法,本文將介紹密碼學中另一類重要應用:消息摘要(Digest),什麼是消息摘要?簡單的定義是:對一份數據,進行一個單向的Hash函數,生成一個固定長度的Hash值,這個值就是這份數據的摘要,也稱為指紋。 ...
  • 弟弟最近要考試,臨時抱佛腳在網上找了一堆學習資料複習,這不剛就來找我了,說PDF上有水印,影響閱讀效果,到時候考不好就怪資料不行,氣的我差點當場想把他揍一頓! 算了,弟弟長大了,看在打不過他的份上,就不打他了~ 稍加思索,我想起了Python不是可以去水印?說搞就搞! 去除水印原理 去除方法: 用 ...
  • 作者:陳昌浩 1 導讀 if…else…在代碼中經常使用,聽說可以通過Java 8的Function介面來消滅if…else…!Function介面是什麼?如果通過Function介面介面消滅if…else…呢?讓我們一起來探索一下吧。 2 Function介面 Function介面就是一個有且僅有 ...