2. 程式人生 > 其它 >[Vue之style和class、陣列更新與檢測、條件渲染、事件修飾符]

[Vue之style和class、陣列更新與檢測、條件渲染、事件修飾符]

阿新 • • 發佈：2021-07-14

[Vue之style和class、陣列更新與檢測、條件渲染、事件修飾符]

style和class

資料的雙向繫結


語法

    :屬性名=js變數/js語法

    :class='js變數、字串、js陣列、js物件'

    :style='js變數、字串、js陣列、js物件'
        
    :自定義屬性='js變數、字串、js陣列、js物件'

示例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue的雙向資料繫結</title>
    <script src="./js/vue.js"></script>
</head>
-------------類屬性-----------------------------------------------------------------
<style>
    .color_red{
        background: red;
    }
    .color_blue{
        background: blue;
    }
    .fonta{
        font-size: 80px;
    }
-------------類屬性-----------------------------------------------------------------
</style>
<body>

-----------測試內容-----------------------------------------------------------------
<div id="test">

    屬性前加冒號表示資料繫結，就可以寫js的變數或語法
    <div :class="class_obj">我是div</div>

    <hr>
    <div :style="style_obj">
        我是另一個div
    </div>
</div>
-----------測試內容-----------------------------------------------------------------

</body>

    
<script>
    var vm = new Vue({
        el: '#test',
        data: {
            // class_obj: 'div_cls_red', //字串
            // class_obj: ['div_cls_red'], //陣列 ---用的多
            class_obj: {div_cls_red: true}, //物件

            // style_obj: 'background: green'// 字串
            // style_obj: [{background:'red'},] //陣列，原來的css樣式的-  全都使用駝峰替換
            style_obj: {background:'yellow'} //原來的css樣式的-  全都使用駝峰替換  ---用的多
            //Vue.set(vm.style_obj,'fontSize','90px')
        },

    })
</script>
</html>


 


style_obj: 'background: blue'// 字串
style_obj: [{background: 'blue'},] //陣列，原來的css樣式的-  全都使用駝峰替換
style_obj: {background:'red'} //原來的css樣式的-  全都使用駝峰替換  ---用的多
Vue.set(vm.style_obj,'fontSize','80px')

:class='字串'


var vm = new Vue({
        el: '#test',
        data: {
            class_obj: 'color_red', //字串
        },
    })

:class='字串'的修改

:class='陣列'


var vm = new Vue({
        el: '#test',
        data: {
            class_obj:['color_red','fonta'], //陣列 ---用的多
        },
    })

:class='陣列'的修改

:class='陣列'補充


var vm = new Vue({
        el: '#test',
        data: {
            # 也可以用列表套字典寫法
            class_obj:[{color_red:true},{fonta:false}],   
        },
    })

:class='陣列'補充的修改方式

:class='物件'


var vm = new Vue({
        el: '#test',
        data: {
            class_obj: {color_blue: true,fonta:true}, //物件
        },
    })

:class='物件'的修改

陣列更新與檢測

可以檢測到變動的陣列操作


push：最後位置新增
pop：最後位置刪除
shift：第一個位置刪除
unshift：第一個位置新增
splice：切片
sort：排序
reverse：反轉

檢測不到變動的陣列操作


filter()：過濾
concat()：追加另一個數組
slice()：
map()：

示例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>檢測與更新</title>
    <script src="./js/vue.js"></script>
</head>
<style>

    .color_red{
        background: red;
    }
    .color_blue{
        background: blue;
    }
    .fonta{
        font-size: 80px;
    }

</style>
<body>

<div id="test">
    <div :class="class_obj">這是第一個div</div>
</div>

</body>
<script>
    var vm = new Vue({
        el:'#test',
        data:{
            name:'劉鵬飛啊',
            class_obj: {color_blue: true,},
        },
    })
</script>

</html>

示例總結


從上面的圖可以看出，有些方法，是不會觸發 dom 的操作，比如 物件[key] = value 或者 物件.key = value

雖然屬性已經設定了，但是沒有觸發 dom 操作，這個時候就需要用 Vue 的其他方法。

# 一定會觸發dom的比較，如果有資料變了。頁面沒變，使用該方式賦值
Vue.set(vm.class_obj,'fonta',true) 		# 給 class_obj 的 fonta 屬性 賦值 true
Vue.delete(vm.class_obj,'color_blue')	# 刪除 class_obj 的 color_blue 屬性

更新和檢測原因


作者重寫了相關方法（只重寫了一部分方法，但是還有另一部分沒有重寫）

vue中使用的是虛擬DOM，會和原生的DOM進行比較，然後進行資料的更新，提高資料的重新整理速度（虛擬DOM用了diff演算法）

條件渲染

[Vue之style和class、陣列更新與檢測、條件渲染、事件修飾符]

style和class

資料的雙向繫結


語法

    :屬性名=js變數/js語法

    :class='js變數、字串、js陣列、js物件'

    :style='js變數、字串、js陣列、js物件'
        
    :自定義屬性='js變數、字串、js陣列、js物件'

示例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue的雙向資料繫結</title>
    <script src="./js/vue.js"></script>
</head>
-------------類屬性-----------------------------------------------------------------
<style>
    .color_red{
        background: red;
    }
    .color_blue{
        background: blue;
    }
    .fonta{
        font-size: 80px;
    }
-------------類屬性-----------------------------------------------------------------
</style>
<body>

-----------測試內容-----------------------------------------------------------------
<div id="test">

    屬性前加冒號表示資料繫結，就可以寫js的變數或語法
    <div :class="class_obj">我是div</div>

    <hr>
    <div :style="style_obj">
        我是另一個div
    </div>
</div>
-----------測試內容-----------------------------------------------------------------

</body>

    
<script>
    var vm = new Vue({
        el: '#test',
        data: {
            // class_obj: 'div_cls_red', //字串
            // class_obj: ['div_cls_red'], //陣列 ---用的多
            class_obj: {div_cls_red: true}, //物件

            // style_obj: 'background: green'// 字串
            // style_obj: [{background:'red'},] //陣列，原來的css樣式的-  全都使用駝峰替換
            style_obj: {background:'yellow'} //原來的css樣式的-  全都使用駝峰替換  ---用的多
            //Vue.set(vm.style_obj,'fontSize','90px')
        },

    })
</script>
</html>




style_obj: 'background: blue'// 字串
style_obj: [{background: 'blue'},] //陣列，原來的css樣式的-  全都使用駝峰替換
style_obj: {background:'red'} //原來的css樣式的-  全都使用駝峰替換  ---用的多
Vue.set(vm.style_obj,'fontSize','80px')

:class='字串'


var vm = new Vue({
        el: '#test',
        data: {
            class_obj: 'color_red', //字串
        },
    })

:class='字串'的修改

:class='陣列'


var vm = new Vue({
        el: '#test',
        data: {
            class_obj:['color_red','fonta'], //陣列 ---用的多
        },
    })

:class='陣列'的修改

:class='陣列'補充


var vm = new Vue({
        el: '#test',
        data: {
            # 也可以用列表套字典寫法
            class_obj:[{color_red:true},{fonta:false}],   
        },
    })

:class='陣列'補充的修改方式

:class='物件'


var vm = new Vue({
        el: '#test',
        data: {
            class_obj: {color_blue: true,fonta:true}, //物件
        },
    })

:class='物件'的修改

陣列更新與檢測

可以檢測到變動的陣列操作


push：最後位置新增
pop：最後位置刪除
shift：第一個位置刪除
unshift：第一個位置新增
splice：切片
sort：排序
reverse：反轉

檢測不到變動的陣列操作


filter()：過濾
concat()：追加另一個數組
slice()：
map()：

示例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>檢測與更新</title>
    <script src="./js/vue.js"></script>
</head>
<style>

    .color_red{
        background: red;
    }
    .color_blue{
        background: blue;
    }
    .fonta{
        font-size: 80px;
    }

</style>
<body>

<div id="test">
    <div :class="class_obj">這是第一個div</div>
</div>

</body>
<script>
    var vm = new Vue({
        el:'#test',
        data:{
            name:'劉鵬飛啊',
            class_obj: {color_blue: true,},
        },
    })
</script>

</html>

示例總結


從上面的圖可以看出，有些方法，是不會觸發 dom 的操作，比如 物件[key] = value 或者 物件.key = value

雖然屬性已經設定了，但是沒有觸發 dom 操作，這個時候就需要用 Vue 的其他方法。

# 一定會觸發dom的比較，如果有資料變了。頁面沒變，使用該方式賦值
Vue.set(vm.class_obj,'fonta',true) 		# 給 class_obj 的 fonta 屬性 賦值 true
Vue.delete(vm.class_obj,'color_blue')	# 刪除 class_obj 的 color_blue 屬性

更新和檢測原因


作者重寫了相關方法（只重寫了一部分方法，但是還有另一部分沒有重寫）

vue中使用的是虛擬DOM，會和原生的DOM進行比較，然後進行資料的更新，提高資料的重新整理速度（虛擬DOM用了diff演算法）

條件渲染

[Vue之style和class、陣列更新與檢測、條件渲染、事件修飾符]

style和class

資料的雙向繫結


語法

    :屬性名=js變數/js語法

    :class='js變數、字串、js陣列、js物件'

    :style='js變數、字串、js陣列、js物件'
        
    :自定義屬性='js變數、字串、js陣列、js物件'

示例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue的雙向資料繫結</title>
    <script src="./js/vue.js"></script>
</head>
-------------類屬性-----------------------------------------------------------------
<style>
    .color_red{
        background: red;
    }
    .color_blue{
        background: blue;
    }
    .fonta{
        font-size: 80px;
    }
-------------類屬性-----------------------------------------------------------------
</style>
<body>

-----------測試內容-----------------------------------------------------------------
<div id="test">

    屬性前加冒號表示資料繫結，就可以寫js的變數或語法
    <div :class="class_obj">我是div</div>

    <hr>
    <div :style="style_obj">
        我是另一個div
    </div>
</div>
-----------測試內容-----------------------------------------------------------------

</body>

    
<script>
    var vm = new Vue({
        el: '#test',
        data: {
            // class_obj: 'div_cls_red', //字串
            // class_obj: ['div_cls_red'], //陣列 ---用的多
            class_obj: {div_cls_red: true}, //物件

            // style_obj: 'background: green'// 字串
            // style_obj: [{background:'red'},] //陣列，原來的css樣式的-  全都使用駝峰替換
            style_obj: {background:'yellow'} //原來的css樣式的-  全都使用駝峰替換  ---用的多
            //Vue.set(vm.style_obj,'fontSize','90px')
        },

    })
</script>
</html>




style_obj: 'background: blue'// 字串
style_obj: [{background: 'blue'},] //陣列，原來的css樣式的-  全都使用駝峰替換
style_obj: {background:'red'} //原來的css樣式的-  全都使用駝峰替換  ---用的多
Vue.set(vm.style_obj,'fontSize','80px')

:class='字串'


var vm = new Vue({
        el: '#test',
        data: {
            class_obj: 'color_red', //字串
        },
    })

:class='字串'的修改

:class='陣列'


var vm = new Vue({
        el: '#test',
        data: {
            class_obj:['color_red','fonta'], //陣列 ---用的多
        },
    })

:class='陣列'的修改

:class='陣列'補充


var vm = new Vue({
        el: '#test',
        data: {
            # 也可以用列表套字典寫法
            class_obj:[{color_red:true},{fonta:false}],   
        },
    })

:class='陣列'補充的修改方式

:class='物件'


var vm = new Vue({
        el: '#test',
        data: {
            class_obj: {color_blue: true,fonta:true}, //物件
        },
    })

:class='物件'的修改

陣列更新與檢測

可以檢測到變動的陣列操作


push：最後位置新增
pop：最後位置刪除
shift：第一個位置刪除
unshift：第一個位置新增
splice：切片
sort：排序
reverse：反轉

檢測不到變動的陣列操作


filter()：過濾
concat()：追加另一個數組
slice()：
map()：

示例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>檢測與更新</title>
    <script src="./js/vue.js"></script>
</head>
<style>

    .color_red{
        background: red;
    }
    .color_blue{
        background: blue;
    }
    .fonta{
        font-size: 80px;
    }

</style>
<body>

<div id="test">
    <div :class="class_obj">這是第一個div</div>
</div>

</body>
<script>
    var vm = new Vue({
        el:'#test',
        data:{
            name:'劉鵬飛啊',
            class_obj: {color_blue: true,},
        },
    })
</script>

</html>

示例總結


從上面的圖可以看出，有些方法，是不會觸發 dom 的操作，比如 物件[key] = value 或者 物件.key = value

雖然屬性已經設定了，但是沒有觸發 dom 操作，這個時候就需要用 Vue 的其他方法。

# 一定會觸發dom的比較，如果有資料變了。頁面沒變，使用該方式賦值
Vue.set(vm.class_obj,'fonta',true) 		# 給 class_obj 的 fonta 屬性 賦值 true
Vue.delete(vm.class_obj,'color_blue')	# 刪除 class_obj 的 color_blue 屬性

更新和檢測原因


作者重寫了相關方法（只重寫了一部分方法，但是還有另一部分沒有重寫）

vue中使用的是虛擬DOM，會和原生的DOM進行比較，然後進行資料的更新，提高資料的重新整理速度（虛擬DOM用了diff演算法）

條件渲染

指令 釋義
v-if 相當於： if
v-else 相當於：else
v-else-if 相當於：else if

示例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>if的使用</title>
    <script src="./js/vue.js"></script>
</head>
<style>

</style>
<body>

<div id="app">

    <p v-if="type==0">第 1 行</p>
    <p v-else-if="type==1">第 2 行</p>
    <p v-else-if="type==2">第 3 行</p>
    <p v-else>第 4 行</p>

</div>

</body>
<script>
        var vm = new Vue({
            el:'#test',
            data:{
                type:1
            },
        })
</script>

</html>

在上面的基礎進行一次變形


<div id="test">

    <button @click="addone">這是一個按鈕</button>
    
    <p v-if="typea==1">第 1 行</p>
    <p v-else-if="typea==2">第 2 行</p>
    <p v-else-if="typea==3">第 3 行</p>
    <p v-else>第 4 行</p>
    
</div>

<script>
    var vm = new Vue({
        el:'#test',
        data:{
            typea:1
        },
        methods:{
            addone(){
                console.log(this.typea)
                this.typea=this.typea+1
            }
        }
    })
</script>

v-if+v-for控制購物車顯示與否


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>購物車的顯示與否</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

</head>
<style>

</style>
<body>


<div id="test" >
    
<button @click="showtime">這是一個按鈕</button>

    <table class="table">
        <tr>
            <td>名字</td>
            <td>價錢</td>
        </tr>
        <tr v-if="shopping.length==0">
            <td>沒有資料啊</td>
            <td>沒有資料啊</td>

        </tr>
        <tr v-else v-for="shop,index in shopping">
            <td>{{shop.name}}</td>
            <td>{{shop.price}}</td>
        </tr>

    </table>

</div>


</body>
<script>
        var vm = new Vue({
            el:'#test',
            data:{
              shopping: [],
            },
            methods:{
                showtime(){
                    this.shopping=[
                    {'name': '番茄', 'price': 20},
                    {'name': '土豆', 'price': 30},
                    {'name': '西紅柿', 'price': 20},
                    {'name': '番茄炒西紅柿', 'price': 40},
                    ]
                }
            }
        })
</script>

</html>

v-for遍歷補充 key


1、vue中涉及到迴圈，通常能看到，:key="item"
    
    <p v-for="item in 4" :key="item">
          <h3>{{ item }}</h3>
    </p>
    
2、vue中使用的是虛擬DOM，會和原生的DOM進行比較，然後進行資料的更新，提高資料的重新整理速度

    在v-for迴圈陣列、物件時，建議在控制元件/元件/標籤寫1個key屬性，屬性值唯一

    頁面更新之後，會加速DOM的替換（渲染）

    :key="變數"

參考文件 : https://www.zhihu.com/question/61064119

過濾案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>過濾案例</title>
    <script src="./js/vue.js"></script>
</head>
<style>

</style>
<body>


<div id="test">

    <input type="text" v-model="serach" @input="showtime">
    <p v-for=" msg,index in newlist">第{{index+1}}個是{{msg}}</p>

</div>


</body>
<script>

    //陣列過濾的使用(1)
    // var ages = [32, 33, 16, 40,8,9,17,18];
    // var ages_new=ages.filter(function (item) {
    //     // console.log(item)
    //     return item >= 18
    // })
    // console.log(ages_new)

    // 使用箭頭函式(es6的語法，箭頭函式)
    // var ages = [32, 33, 16, 40, 8, 9, 17, 18];
    // var ages_new = ages.filter(item => {
    //     return item >= 18
    // })
    // console.log(ages_new)

    var vm = new Vue({
        el: '#test',
        data: {
            serach:'',
            baselist:['a','abc','bcd','bdgd','cfdag','cbfd','cwefd','fdoan','fu','fing','liui','linng','lpq','pzx','pmm',],
            newlist:[]
        },
        methods: {
            showtime() {
            this.newlist = this.baselist.filter(item => {
                var num = this.serach.length
                if(this.serach === 'all'){
                    return true
                }
                if( num === 0){
                    return false
                }
                return item.indexOf(this.serach)>-1
            })
            }

        }
    })
</script>

</html>

事件修飾符

事件修飾符 釋義
.stop 只處理自己的事件，父控制元件冒泡的事件不處理（阻止事件冒泡）
.self 只處理自己的事件，子控制元件冒泡的事件不處理
.prevent 阻止a連結的跳轉
.once 事件只會觸發一次（適用於抽獎頁面）

使用修飾符時，順序很重要；相應的程式碼會以同樣的順序產生

@事件.self @事件.stop 


--------------冒泡事件-------------------------------------------------------------

<div id="app">

<div @click.self="one('第一個div')">第一個div
  <div @click="one('第一個div裡面的div')">第一個div裡面的div
    <div @click="one('第一個div裡面的div裡面的div')">第一個div裡面的div裡面的div</div>
    </div>
  </div>
</div>

</body>
<script>
    var vm = new Vue({
        el: '#test',
        data: {},
        methods:{
            one(msg){
                console.log(msg)
            }
        }
    })
</script>

div包裹div裡面再包裹一層div

如果都有點選事件，點選裡層的，會同時觸發外層的事件


--------------阻止冒泡------------------------------------------------------

<div @click.self="one('第一個div')">第一個div 
  <div @click="one('第一個div裡面的div')">第一個div裡面的div
	<div @click.stop="one('第一個div裡面的div裡面的div')">第一個div裡面的div裡面的div
  </div>
</div>

關於事件.self和事件.stop


.self 是對於子類行為不作為，也就是說子類中有點選事件，自己也有事件，子類如何都不會觸發自己的事件。

.stop 是對父類不作為行為，自己和父類都有點選事件，自己觸發之後結束，不會冒泡。

@事件.prevent


<div id="test">
	<a href="https://github.com/" @click="one(點選了一下a標籤)">點我即可</a>
</div>

<script>
    var vm = new Vue({
        el: '#test',
        data: {},
        methods:{
            one(msg){
                console.log(msg)
            }
        }
    })
</script>

先觸發了點選事件，然後跳轉

事件新增 prevent


<a href="https://github.com/" @click.prevent="one('點選了一下a標籤')">點我即可</a>

@事件.once


<div id="test">
	<p @click="one">點了 {{serach}} 次</p>
</div>

<script>
	var vm = new Vue({
 		el: '#test',
        data: {
            serach:1,
        },
        methods:{
            one(){
                this.serach+=1
            }
        }
    })                     
</script>

事件可以一直觸發，有時候為了避免這種情況可以用once


<p @click.once="one">點了 {{serach}} 次</p>

相關推薦

[Vue之style和class、陣列更新與檢測、條件渲染、事件修飾符]

[Vue之style和class、陣列更新與檢測、條件渲染、事件修飾符] style和class 資料的雙向繫結

bootstrap的簡單使用，離線儲存，Vue中表單輸入，動態樣式之class，常用的事件修飾符與鍵盤修飾符

Bootstrap 官網地址 https://www.bootcss.com/​https://v4.bootcss.com/ （4版本的官網） 概念 簡潔、直觀、強悍的前端開發框架，讓web開發更迅速、簡單。一套簡單的UI框架

C++模板之typename和class關鍵字的區別

C++模板之typename和class關鍵字的區別 我們都知道，在STL中基本上都使用了模板類的宣告，即template。在模板類的宣告中，我們有兩種方式：

Vue之事件處理和事件修飾符詳解

<div id=\"root\"> <h2>{{name}}，加油！</h2> <!-- 阻止預設事件 --> <a @click.prevent=\"showInfo\" href=\"https:www.baidu.com\">點我提示資訊</a>

vue雙擊事件2.0事件監聽(點選-雙擊-滑鼠事件)和事件修飾符操作

Vue 事件處理方法 可以用 v-on 指令監聽 DOM 事件，並在觸發時執行一些 JavaScript 程式碼。

Vue.js 條件渲染、列表渲染、事件處理、表單輸入繫結基本使用

條件渲染、列表渲染、事件處理、表單輸入繫結基本使用 條件渲染 v-if 基本用法

作業系統之檔案管理：6、檔案共享與檔案保護(軟連線、硬連結、口令保護、加密保護、訪問控制)

6、檔案共享與檔案保護 檔案共享思維導圖基於索引結點的共享方式（硬連結）基於符號鏈的共享方式（軟連結）

Vue-事件修飾符(.stop、.prepent、.capture、.self、.once)

技術標籤：Vue <div id="app"> <!-- .stop阻止冒泡行為 --> <!-- <div class="innerDiv" @click="innerClick">

解決mybatis-plus3.4.1分頁外掛PaginationInterceptor和防止全表更新與刪除外掛SqlExplainInterceptor過時失效問題

前言 在Mybatis Plus 3.4.0版本之後PaginationInterceptor外掛就失效,新增Mybatis Plus 3.4.0的新內建外掛

Unity指令碼之C#和Js的互相獲取與呼叫

技術標籤：Unity基礎Unity 關於這個JS在Unity2017已經棄用了，有不少的企業和專案依然在用使用像Unity4.x和Unity5.x等。

Vue事件繫結，事件修飾符（stop和prevent），按鍵修飾符

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">

vue中@click與它的事件修飾符@click.stop、@click.prevent

@click.stop ：阻止事件冒泡 <template> <div @click=\"outside\"> <el-button @click=\"inside\">按鈕</el-button>

vue事件修飾符

1、冒泡與捕獲： 冒泡：由內向外觸發；捕獲：由外向內觸發 2、修飾符 （1）.stop修飾符：阻止事件冒牌，不讓他向外觸發

04-vue的事件修飾符

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">

Vue自定義元件使用事件修飾符的踩坑記錄

前言 今天在使用自寫元件時，突然遇到久違MvLjX的冒泡事件，就想著使用vue自帶的事件修飾符(.stop)，本以為可以就此解決冒泡，卻遇到這個問題。

微信小程式系列--【VXML語法、VMSS樣式、條件渲染、列表渲染、模板、引用、元件、事件系統】

一、小程式邏輯層 getCurrentPages 獲取當前的頁面棧，頁面棧是一個數組，記錄小城序走過那些頁面，方便頁面返回。

Vue：事件修飾符

常見得修飾符： 1.prevent：阻止預設事件觸發只觸發函式 2.stop：阻止冒泡：冒泡是會向父級跳轉的

vue學習---Vue中的事件修飾符

Vue中的事件修飾符： 1.prevent：阻止預設事件（常用）； 2.stop：阻止事件冒泡（常用）；

Vue 事件修飾符

常用的事件修飾符： prevent ：阻止預設事件 stop ：阻止事件冒泡 once ：事件只觸法一次

vue 繫結class、v-bind:style(物件語法、陣列語法)

繫結 HTML Class 我們可以傳給 v-bind:class 一個物件，以動態地切換 class： 內聯樣式在模板裡