欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue?指令與過(guò)濾器案例代碼

 更新時(shí)間：2022年11月25日 14:10:08   作者：我和我和我  
這篇文章主要介紹了vue?指令與過(guò)濾器，本文通過(guò)案例代碼給大家詳細(xì)講解，給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

vue 指令與過(guò)濾器

內(nèi)容渲染指令

內(nèi)容渲染指令是用來(lái)輔助開(kāi)發(fā)者渲染 DOM 元素的文本內(nèi)容。常用的內(nèi)容渲染指令有3種。

v-text

示例

<div id="app">
    <!-- 把 username 對(duì)應(yīng)的值，渲染到第一個(gè) p 標(biāo)簽中 -->
    <p v-text="username"></p>
    <!-- 把 gender 對(duì)應(yīng)的值，渲染到第二個(gè) p 標(biāo)簽中 -->
    <!-- 注意：第二個(gè) p 標(biāo)簽中，默認(rèn)文本會(huì)被gender值覆蓋 -->
    <p v-text="gender">性別</p>
</div>
<!-- 導(dǎo)入 vue 的庫(kù)文件 -->
    <script src="./lib/vue.js v2.7.13.js"></script>
//創(chuàng)建vue 的實(shí)例對(duì)象
const vm = new Vue({
    //el 屬性是固定寫法，表示當(dāng)前 vm 實(shí)例要控制的區(qū)域，接收的是一個(gè)選擇器
    el: '#app',
    // data 對(duì)象就是要渲染到頁(yè)面上的數(shù)據(jù)
    data: {
        username: 'zs',
        gender: '男'
    }
});

插值表達(dá)式 {{}}雙大括號(hào)

在實(shí)際開(kāi)發(fā)中應(yīng)用較多，不會(huì)覆蓋原有渲染
示例

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

v-html

可以把帶標(biāo)簽的的字符串，渲染成真正的html 內(nèi)容
示例

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

屬性綁定指令

注意：插值表達(dá)式只能用在元素內(nèi)容節(jié)點(diǎn)中，不能用在元素的屬性節(jié)點(diǎn)

動(dòng)態(tài)綁定屬性值 v-bind

在屬性前加屬性指令 v-bind: 為元素動(dòng)態(tài)綁定值，vue 規(guī)定 v-bind 可以簡(jiǎn)寫成: ,示例

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

使用 javascript 表達(dá)式

在 vue 提供的模板渲染語(yǔ)法中，除了支持綁定簡(jiǎn)單的數(shù)據(jù)值之外，還支持 javascript 表達(dá)式的運(yùn)算，例如

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

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

注意在簡(jiǎn)寫 v-bind 屬性綁定期間，如果綁定內(nèi)容需要進(jìn)行動(dòng)態(tài)拼接，則字符串外應(yīng)包裹單引號(hào)，例如

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

事件綁定指令

v-on 綁定事件

v-on 綁定事件指令，輔助程序員為DOM元素綁定監(jiān)聽(tīng)事件，格式如下

<p>count的值是: {{count}}</p>
        <!-- 語(yǔ)法格式為 v-on:事件名稱="事件處理函數(shù)的名稱" -->
        <button v-on:click="addCount">+1</button>
 const vm = new Vue({
            //el 屬性是固定寫法，表示當(dāng)前 vm 實(shí)例要控制的區(qū)域，接收的是一個(gè)選擇器
            el: '#app',
            // data 對(duì)象就是要渲染到頁(yè)面上的數(shù)據(jù)
            data:{
                count: 0,
            },
            // 定義事件的處理函數(shù)
            methods:{
                add: function () {
                    // console.log(vm);
                    // vm.count += 1; 
		    // this === vm 
                    this.count += 1;
                }
		// 也可簡(jiǎn)寫成
                add () {
                    // console.log(vm);
                    this.count += 1;
                }
            }
        });

v-on: 也可以簡(jiǎn)寫為 @

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

注意：原生 DOM 對(duì)象有 onclick、oninput、onkeydown 等原生事件，替換成 vue 的事件綁定形式后，分別為： v-on:click 、v-on:input、v-on:keydown

事件對(duì)象

vue 提供了內(nèi)置固定的變量 $event ，它就是原生 DOM 的事件對(duì)象 e

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

事件修飾符

在事件處理函數(shù)中調(diào)用 event.preventDefault() 或 event.stopPROpagation() 是非常常見(jiàn)的需求。因此， vue 提供了事件修飾的概念，輔助程序員更方便的**對(duì)事件的觸發(fā)進(jìn)行控制。常用5種修飾符如下：

事件修飾符說(shuō)明
.prevent阻止默認(rèn)行為（例如：阻止 a 鏈接跳轉(zhuǎn)、阻止表單提交等）
.stop阻止事件冒泡
.capture以捕獲模式觸發(fā)當(dāng)前的事件處理函數(shù)
.once綁定事件只觸發(fā)一次
.self只有在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)事件處理函數(shù)

示例1：

<a  rel="external nofollow"  @click.prevent="show">跳轉(zhuǎn)到百度首頁(yè)</a>
const vm = new Vue({
            //el 屬性是固定寫法，表示當(dāng)前 vm 實(shí)例要控制的區(qū)域，接收的是一個(gè)選擇器
            el: '#app',
            // data 對(duì)象就是要渲染到頁(yè)面上的數(shù)據(jù)
            data:{},
            // 定義事件的處理函數(shù)
            methods:{
                show () {
		    // e.preventDefault();
                    console.log("點(diǎn)擊了 a 鏈接");
                }
            } 
        });

到此這篇關(guān)于vue 指令與過(guò)濾器的文章就介紹到這了,更多相關(guān)vue 指令與過(guò)濾器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論