前端開發學習 (二) 事件修飾符、系統命令

其實，我們上一章的時候就已經說過了一些系統指令，這里詳細介紹一下

一、v-on的事件修飾符

事件作用
click點擊時觸發
submit表單被提交時觸發
input輸入框發生改變時觸發
keyup按鍵松開時觸發
keydown按鍵按下時觸發
mouseover鼠標懸停觸發
mouseout當鼠標移開元素時觸發
.stop阻止冒泡。本質是調用 event.stopPropagation()。
.prevent阻止默認事件（默認行為）。本質是調用 event.preventDefault()
.capture添加事件監聽器時，使用捕獲的方式（也就是說，事件采用捕獲的方式，而不是采用冒泡的方式）
.self只有當事件在該元素本身（比如不是子元素）觸發時，才會觸發回調
.once事件只觸發一次
.{keyCode | keyAlias}只當事件是從偵聽器綁定的元素本身觸發時，才觸發回調
.native監聽組件根元素的原生事件

1、click事件

        <!-- click事件 --><button v-on:click="doThis"></button><!-- 縮寫 --><button @click="doThis"></button>

案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script></head><body>
<div id="app1"><!-- click事件 --><button v-on:click="doThis">按鈕1</button><!-- 縮寫 --><button @click="doThis">按鈕2</button>
</div><script>new Vue({el: '#app1',methods: {doThis() {  //添加一個觸發函數alert(' 被點擊了'); //做一個彈窗提示效果},}});
</script>
</body></html>

2、內鏈調用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script></head><body>
<div id="app1"><!-- click事件 --><button v-on:click="doThat('hello', $event)">按鈕</button>
</div><script>new Vue({el: '#app1',methods: {doThat(param, event) {// 在這里編寫處理點擊事件的邏輯alert(param)console.log(event);}}});
</script>
</body></html>

?3、.stop 阻止父子標簽冒泡關系

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><style>.father {height: 300px;width: 300px;background: pink;}.child {width: 200px;height: 200px;background: green;}</style>
</head><body>
<div id="app1"><div class="father" @click="fatherClick"><div class="child" @click="childClick"></div></div>
</div>
<script>var vm = new Vue({el: '#app1',data: {},methods: {fatherClick: function () {console.log('father 被點擊了');},childClick: function () {console.log('child 被點擊了');}}})</script>
</body></html>

可以看到上面的代碼中兩個div存在父子標簽關系，當點擊綠色的子標簽時，粉色的父標簽管理的按鈕同時也會觸發，而單獨點擊粉色的父標簽則只會觸發自己獨立的函數，為了解決這種父子關系，需要使用到阻止觸發.stop? 

<div class="child" @click.stop="childClick">

案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><style>.father {height: 300px;width: 300px;background: pink;}.child {width: 200px;height: 200px;background: green;}</style>
</head><body>
<div id="app1"><div class="father" @click="fatherClick"><div class="child" @click.stop="childClick"></div></div>
</div>
<script>var vm = new Vue({el: '#app1',data: {},methods: {fatherClick: function () {console.log('father 被點擊了');},childClick: function () {console.log('child 被點擊了');}}})</script>
</body></html>

?

4、.capture 子標簽冒泡捕獲

.capture?事件修飾符的主要作用是改變事件的傳播順序。在默認情況下，事件從目標元素開始在冒泡階段向外傳播，而使用?.capture?修飾符后，事件將在捕獲階段先行觸發

??? 當您在包含子元素的父元素上綁定?.capture?修飾符的事件監聽器時，該監聽器會在子元素上的事件監聽器之前觸發，我們通常用他來做下面兩件事

1、阻止事件冒泡   #當您需要阻止事件冒泡到父元素或更外層元素時#可以在父元素上使用 .capture 修飾符，并在父元素上處理事件#從而阻止子元素上的事件處理器被觸發。2、處理全局事件  #有時您可能需要在應用程序的根元素上全局監聽某個特定的事件#以便捕獲所有子組件中相應的事件，這時可以使用 .capture 修飾符來確保您的#監聽器在其他組件的監聽器之前被觸發

案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><style>.father {height: 300px;width: 300px;background: pink;}.child {width: 200px;height: 200px;background: green;}</style>
</head><body>
<div id="app1">
<!--  在父標簽上添加.capture 阻止冒泡行為--><div class="father" @click.capture="fatherClick"><div class="child" @click="childClick"></div></div>
</div>
<script>var vm = new Vue({el: '#app1',data: {},methods: {fatherClick: function () {console.log('father 被點擊了');},childClick: function () {console.log('child 被點擊了');}}})</script>
</body></html>

這樣一來，當我們的子標簽生效之前，會被父標簽捕獲，等待父標簽執行完畢后才會執行子標簽

5、.prevent? 超鏈接跳轉捕獲

比如說，超鏈接<a>默認有跳轉行為，那我可以通過事件修飾符.prevent阻止這種跳轉行為

案例1 阻止鏈接跳轉頁面
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><style>.father {height: 300px;width: 300px;background: pink;}.child {width: 200px;height: 200px;background: green;}</style>
</head><body>
<div id="app1"><!-- 通過 .prevent 阻止超鏈接的默認跳轉行為 --><a href="http://www.baidu.com" @click.prevent="linkClick">百度一下</a></div>
<script>var vm = new Vue({el: '#app1',data: {},methods: {linkClick: function () {console.log('超鏈接被點擊了');}}})</script>
</body></html>

案例2 阻止表單提交跳轉

假設我們現在有一個表單，如下

    <form action="http://www.baidu.com"><input type="submit" value="表單提交"></form>

???? 正常來說，我們點擊上面表單的按鈕時，這個表單就會被提交到form標簽的action屬性中指定的那個頁面中去，我們并不是每次都希望這樣，當不希望他進行跳轉的時候，也可以使用.prevent來阻止這種默認行為，而修改為點擊按鈕后，不提交到服務器，而是執行我們自己想要的事件（在submit方法中另行定義 ）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><style>.father {height: 300px;width: 300px;background: pink;}.child {width: 200px;height: 200px;background: green;}</style>
</head><body>
<div id="app1"><!-- 阻止表單中submit的默認事件 --><form @submit.prevent action="http://www.baidu.com"><!-- 執行自定義的click事件 --><input type="submit" @click="mySubmit" value="表單提交"></form></div>
<script>var vm = new Vue({el: '#app1',data: {},methods: {//添加mySubmit: function() {alert('ok');}}})</script>
</body></html>

6、.self 限制返回自身元素

????? 我們知道，在事件觸發機制中，當點擊子標簽時，父標簽會通過冒泡的形式被觸發（父標簽本身并沒有被點擊）。可如果我給父標簽的點擊事件設置.self修飾符，達到的效果是：子標簽的點擊事件不會再冒泡到父標簽了，只有點擊符標簽本身，父標簽的事件才會被觸發

總結：

????? .self 只有當事件在該元素本身（比如不是子元素）觸發時，才會觸發回調 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><style>.father {height: 300px;width: 300px;background: pink;}.child {width: 200px;height: 200px;background: green;}</style>
</head><body>
<div id="app1">
<!--    定義父標簽為self--><div class="father" @click.self="fatherClick"><div class="child" @click="childClick"></div></div>
</div>
<script>var vm = new Vue({el: '#app1',data: {},methods: {fatherClick: function () {console.log('father 被點擊了');},childClick: function () {console.log('child 被點擊了');}}})</script>
</body></html>

可以看到兩個標簽都是獨立的了，點擊互不影響 (看右側調試的次數就是點擊了幾次）

二、系統命令

1、v-model 雙向綁定

雙向數據綁定，只能用于表單元素，或者用于自定義組件

我們在上一張裝完vue環境后做過了一個v-bind? 通過給<input>標簽綁定了data對象里的name屬性。當data里的name的值發生改變時，<input>標簽里的內容會自動更新 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head><body>
<div id="div1"><!--  添加text和html的msg區分--><!-- value里的值只是簡單的字符串 --><input type="text" value="name"><!-- 加上 v-bind 之后，value里的值是 Vue 里的變量 --><input type="text" v-bind:value="name"><!-- 超鏈接后面的path是 Vue 里面的變量 --><a v-bind="{href:'http://www.baidu.com/'+path}">超鏈接</a></div>
</body><script>var myVue = new Vue({el: '#div1',data: {name: 'smyhvae',path: `2.html`,},});
</script>
</html>

可我現在要做的是，在在<input>標簽里修改內容，要求data里的name的值自動更新。從而實現雙向數據綁定。這就可以利用v-model這個屬性

1、v-bind 和 v-model的區別
v-bind   #只能實現數據的單向綁定，從 M 自動綁定到 V。v-model  #只有`v-model`才能實現雙向數據綁定。注意v-model后面不需要跟冒號，
2、v-model案例

v-model 只能運用在表單元素中，或者用于自定義組件。常見的表單元素包括：

input(radio, text, address, email....) 、select、checkbox 、textarea 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><style>.father {height: 300px;width: 300px;background: pink;}.child {width: 200px;height: 200px;background: green;}</style>
</head><body>
<div id="app1"><form action="#"><!-- 將 input 標簽中的value值雙向綁定到 Vue實例中的data。注意，v-model 后面不需要跟冒號 --><input type="text" id="username" v-model="myAccount.username"><input type="password" id="pwd" v-model="myAccount.userpwd"><input type="submit" v-on:click="submit1" value="注冊"></form></div>
<script>var vm = new Vue({el: '#app1',//上面的標簽中采用v-model進行雙向數據綁定，數據會自動更新到data里面來data: {name: 'test',myAccount: {username: '', userpwd: ''}},//在methods里綁定各種方法，根據業務需要進行操作methods: {submit1: function () {alert(this.myAccount.username + "  pwd=" + this.myAccount.userpwd);}}})</script>
</body></html>

我們可以看到，當我們輸入的文本會自動更新到data的數據中，后續我們可以搭配data和函數去定義一些關于訪問其他api，然后值后，再去自動更新頁面數據v-bind的操作

3、練習? 計算器

現在兩個輸入框，用來做加減乘除，將運算的結果放在第三個輸入框 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><style>.father {height: 300px;width: 300px;background: pink;}.child {width: 200px;height: 200px;background: green;}</style>
</head><body>
<div id="app1"><input type="text" v-model="n1"><select v-model="opt"><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option></select><input type="text" v-model="n2"><input type="button" value="=" @click="calc"><input type="text" v-model="result"></div>
<script>var vm = new Vue({el: '#app1',data: {n1: 0,n2: 0,result: 0,opt: '+'},methods: {calc() { // 計算器算數的方法// 邏輯判斷：switch (this.opt) {case '+':this.result = parseInt(this.n1) + parseInt(this.n2)break;case '-':this.result = parseInt(this.n1) - parseInt(this.n2)break;case '*':this.result = parseInt(this.n1) * parseInt(this.n2)break;case '/':this.result = parseInt(this.n1) / parseInt(this.n2)break;}}}})</script>
</body></html>

?驗證如下，當我們輸入前兩個值后點擊=按鈕 會自動更新結尾的數據

2、.class 類樣式

Vue中通過屬性綁定為元素設置class 類樣式的，我們首先定義一個基礎的帶css樣式的頁面

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.my-red {/*字體顏色為紅色*/color: red;}.my-thin {/* 設置字體的粗細 */font-weight: 200;}.my-italic {/*設置字體樣式*/font-style: italic;}.my-active {/* 設置字符之間的間距 */letter-spacing: 0.5em;}</style>
</head><body>
<div id="app1">
<!--    定義標題，并使用css樣式--><h1 class="my-red my-thin">今天又是充滿希望的一天</h1></div><script>
</script>
</body></html>

?

方法1? 數組引用

直接傳遞一個數組。這里的 class 需要使用 v-bind 做數據綁定 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><style>.my-red {color: red;}.my-thin {font-weight: 200;}.my-italic {font-style: italic;}.my-active {letter-spacing: 0.5em;}</style>
</head><body>
<div id="app1"><!-- 普通寫法 --><h1 class="my-red my-thin">今天又是充滿希望的一天</h1><!-- vue的寫法1：數組的形式 --><h1 :class="['my-red', 'my-thin']">今天又是充滿希望的一天</h1></div><script>var vm = new Vue({el: '#app1'});</script>
</body></html>

注意，數組里寫的是字符串；如果不加單引號，就不是字符串了，而是變量

方法2? 在數組中使用三元表達式
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><style>.my-red {color: red;}.my-thin {font-weight: 200;}.my-italic {font-style: italic;}.my-active {letter-spacing: 0.5em;}</style>
</head><body>
<div id="app1"><!-- vue的寫法2：在數組中使用三元表達式。注意格式不要寫錯--><!-- 通過data中布爾值 flag 來判斷：如果 flag 為 true，就給 h1 標簽添加`my-active`樣式；否則，就不設置樣式。 --><!--    這里如果為true 則會添加文本間距的效果--><h1 :class="[flag?'my-active':'']">今天又是充滿希望的一天</h1></div><script>var vm = new Vue({el: '#app1',data: {flag: true}});
</script>
</body></html>

上方代碼的意思是，通過data中布爾值 flag 來判斷：如果 flag 為 true，就給 h1 標簽添加my-active樣式；否則，就不設置樣式

方法3?? 在數組中使用 對象 來代替 三元表達式

方法二的可讀性較差，就有這個方法

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><style>.my-red {color: red;}.my-thin {font-weight: 200;}.my-italic {font-style: italic;}.my-active {letter-spacing: 0.5em;}</style>
</head><body>
<div id="app1"><!-- vue的寫法3：在數組中使用對象來代替三元表達式。--><h1 :class="[ {'my-active':flag} ]">今天又是充滿希望的一天</h1></div><script>var vm = new Vue({el: '#app1',data: {flag: true}});
</script>
</body></html>
方法4?? 直接寫對象

在定義html的時候直接聲明 css中的名稱 是true還是false，true則生效，false不生效

<h1 :class="{style1:true, style2:false}">今天又是充滿希望的一天</h1>

案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><style>.my-red {color: red;}.my-thin {font-weight: 200;}.my-italic {font-style: italic;}.my-active {letter-spacing: 0.5em;}</style>
</head><body>
<div id="app1"><!-- vue的寫法4：直接使用對象--><!-- 在為 class 使用 v-bind 綁定 對象的時候，:class 就是v-bind:class 別忘了哈--><h1 :class="{style1:true, style2:false}">今天又是充滿希望的一天</h1>
</div><script>var vm = new Vue({el: '#app1',data: {classObj:{style1:true, style2:false}}});
</script>
</body></html>

上面這種對象，我們也可以對象通過存放在 data 的變量中 ，聲明如下

，

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><style>.my-red {color: red;}.my-thin {font-weight: 200;}.my-italic {font-style: italic;}.my-active {letter-spacing: 0.5em;}</style>
</head><body>
<div id="app1"><!-- vue的寫法4：直接使用對象--><!-- 在為 class 使用 v-bind 綁定 對象的時候，對象的屬性是類名。由于 對象的屬性名可帶引號，也可不帶引號，所以 這里我沒寫引號；  屬性的值 是一個標識符 --><h1 :class="classObj">今天又是充滿希望的一天</h1>
</div><script>var vm = new Vue({el: '#app1',data: {classObj:{style1:true, style2:false}}});
</script>
</body></html>

3、.style 行內樣式

通過屬性綁定為元素設置 style 行內樣式,? 注意是行內樣式（即內聯樣式）

寫法1 元素中直接書寫

直接在元素上通過 :style 的形式，書寫樣式對象 

<h1 :style="{color: 'red', 'font-size': '20px'}">今天好漫長</h1>

寫法2? 定義到data中

將樣式對象，定義到 data 中，并直接引用到 :style 中

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script></head><body>
<div id="app1"><h1 :style="styleObj">好無聊啊</h1></div><script>var vm = new Vue({el: '#app1',data: {//在data中定義樣式styleObj: { color: 'red', 'font-size': '20px' }}});
</script>
</body></html>

寫法3? 定義多組樣式
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script></head><body>
<div id="app1">
<!--    調用多個樣式--><h1 :style="[ styleObj1, styleObj2 ]">好無聊啊</h1></div><script>var vm = new Vue({el: '#app1',data: {//聲明多種樣式styleObj1: { color: 'red', 'font-size': '20px' },styleObj2: { 'font-style': 'italic' }}});
</script>
</body></html>

4、v-for? 循環使用

根據數組中的元素遍歷指定模板內容生成內容 ，比如說，如果我想給一個ul中的多個li分別賦值1、2、3...。如果不用循環，就要挨個賦值

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script></head><body>
<div id="app1"><ul><li>{{list[0]}}</li><li>{{list[1]}}</li><li>{{list[2]}}</li></ul></div><script>var vm = new Vue({el: '#app1',data: {list: [1, 2, 3]}});
</script>
</body></html>

寫法1? 循環普通數組的遍歷
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script></head><body>
<div id="app1"><ul><!-- 使用v-for對多個li進行遍歷賦值 --><li v-for="item in list">{{item}}</li></ul></div><script>var vm = new Vue({el: '#app1',data: {list: [1, 2, 3]}});
</script>
</body></html>

?上面的方法只是將數組的值打印出來，如果我們想要將索引和值一塊打印出來可以使用下面的方法

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script></head><body>
<div id="app1"><ul><!-- 使用v-for對多個li進行遍歷賦值 --><li v-for="(item,index) in list">值：{{item}} --- 索引：{{index}}</li></ul></div><script>var vm = new Vue({el: '#app1',data: {list: [1, 2, 3]}});
</script>
</body></html>

?

方式2：對象數組的遍歷
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script></head><body>
<div id="app1"><ul><!-- 對象數組的遍歷。括號里如果寫兩個參數：第一個參數代表數組的單個item，第二個參數代表 index 索引--><li v-for="(item, index) in dataList">姓名：{{item.name}} --- 年齡：{{item.age}} --- 索引：{{index}}</li></ul></div><script>var vm = new Vue({el: '#app1',data: {//對象數組dataList: [{ name: 'smyh', age: '26' },{ name: 'vae', age: '32' },{ name: 'xiaoming', age: '20' }]}});
</script>
</body></html>

方式3：對象的遍歷
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script></head><body>
<div id="app1"><ul><!-- 括號里如果寫兩個參數：則第一個參數代表value，第二個參數代表key --><li v-for="(value,key) in obj1">值：{{value}} --- 鍵：{{key}} </li><h3>---分隔線---</h3><!-- 括號里如果寫三個參數：則第一個參數代表value，第二個參數代表key，第三個參數代表index --><li v-for="(value,key,index) in obj1">值：{{value}} --- 鍵：{{key}} --- index：{{index}} </li></ul></div><script>var vm = new Vue({el: '#app1',data: {obj1: {name: 'zhangsa',age: '26',gender: '男'}}});
</script>
</body></html>

方式4：遍歷數字

in后面還可以直接放數字

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script></head><body>
<div id="app1"><ul><!-- 對象數組的遍歷 --><!-- 注意：如果使用 v-for 遍歷數字的話，前面的 myCount 值從 1 開始算起 --><li v-for="myCount in 10">這是第 {{myCount}}次循環</li></ul></div><script>var vm = new Vue({el: '#app1',data: {obj1: {name: 'zhangsa',age: '26',gender: '男'}}});
</script>
</body></html>
v-for中key的使用注意事項
**注意**：在 Vue 2.2.0+ 版本里，當在**組件中**使用 v-for 時，key 屬性是必須要加上的。這樣做是因為：每次 for 循環的時候，通過指定 key 來標示當前循環這一項的**唯一身份**。> 當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用 “**就地復用**” 策略。如果數據項的順序被改變，Vue將**不是移動 DOM 元素來匹配數據項的順序**， 而是**簡單復用此處每個元素**，并且確保它在特定索引下顯示已被渲染過的每個元素。> 為了給 Vue 一個提示，**以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素**，你需要為每項提供一個唯一 key 屬性。

key的類型只能是：string/number，而且要通過 v-bind 來指定

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script></head><body>
<div id="app1"><div><label>Id:<input type="text" v-model="id"></label><label>Name:<input type="text" v-model="name"></label><input type="button" value="添加" @click="add"></div><!-- 注意： v-for 循環的時候，key 屬性只能使用 number 或者 string --><!-- 注意： key 在使用的時候，必須使用 v-bind 屬性綁定的形式，指定 key 的值 --><!-- 在組件中，使用v-for循環的時候，或者在一些特殊情況中，如果 v-for 有問題，必須 在使用 v-for 的同時，指定 唯一的 字符串/數字 類型 :key 值 --><p v-for="item in list" :key="item.id"><input type="checkbox">{{item.id}} --- {{item.name}}</p></div><script>var vm = new Vue({el: '#app1',data: {id: '',name: '',list: [{ id: 1, name: 'smyh' },{ id: 2, name: 'vae' },{ id: 3, name: 'qianguyihao' },{ id: 4, name: 'xiaoming' },{ id: 5, name: 'xiaohong' }]},methods: {add() { // 添加方法this.list.unshift({ id: this.id, name: this.name })}}});
</script>
</body></html>

5、v-if 設置元素的顯示和隱藏（添加/刪除DOM元素）

根據表達式的值的真假條件，來決定是否渲染元素，如果為false則不渲染（達到隱藏元素的目的），如果為true則渲染。在切換時，元素和它的數據綁定會被銷毀并重建

案例 點擊按鈕時，切換和隱藏盒子
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script></head><body>
<div id="app1"><button v-on:click="toggle">顯示/隱藏</button><div v-if="isShow">我是盒子</div>
</div><script>var vm = new Vue({el: '#app1',data: {isShow: true},methods: {toggle: function() {this.isShow = !this.isShow;}}});
</script>
</body></html>

6、v-show 設置元素的顯示和隱藏

（在元素上添加/移除style="display:none"屬性）

根據表達式的真假條件，來切換元素的 display 屬性。如果為false，則在元素上添加 display:none屬性；否則移除display:none屬性

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script></head><body>
<div id="app1"><button v-on:click="toggle">顯示/隱藏</button><div v-show="isShow">我是盒子</div>
</div><script>var vm = new Vue({el: '#app1',data: {isShow: true},methods: {toggle: function() {this.isShow = !this.isShow;}}});
</script>
</body></html>

v-if和v-show的區別
v-if和v-show都能夠實現對一個元素的隱藏和顯示操作。區別：v-if：每次都會重新添加/刪除DOM元素v-show：每次不會重新進行DOM的添加/刪除操作，只是在這個元素上添加/移除style="display:none"屬性，表示節點的顯示和隱藏。優缺點：v-if：有較高的切換性能消耗。這個很好理解，畢竟每次都要進行dom的添加／刪除操作。v-show：有較高的初始渲染消耗。也就是說，即使一開始v-show="false"，該節點也會被創建，只是隱藏起來了。而v-if="false"的節點，根本就不會被創建。總結：如果元素涉及到頻繁的切換，最好不要使用 v-if, 而是推薦使用 v-show如果元素可能永遠也不會被顯示出來被用戶看到，則推薦使用 v-if

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/163002.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/163002.shtml
英文地址，請注明出處：http://en.pswp.cn/news/163002.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

安徽省廣德市選擇云軸科技ZStack Cloud云平臺建設縣級智慧城市

安徽省廣德市選擇云軸科技ZStack Cloud云平臺建設縣級智慧城市

信創是數字中國建設的重要組成部分&#xff0c;也是數字經濟發展的關鍵推動力量。作為云基礎軟件企業&#xff0c;云軸科技ZStack產品矩陣全面覆蓋數據中心云基礎設施&#xff0c;ZStack信創云首批通過可信云《一云多芯IaaS平臺能力要求》先進級&#xff0c;是其中唯一兼容四種…
閱讀更多...
錯誤記錄：AttributeError/TypeError

錯誤記錄：AttributeError/TypeError

【pycharm】報錯&#xff1a;AttributeError: partially initialized module ‘numpy’ has no attribute ‘array’ (most likely due to a circular import)的錯誤 文件名與調用包的名稱一致引起歧義 解決辦法&#xff1a;修改文件名重新run 【pycharm】報錯&#xff1a;T…
閱讀更多...
【Web】NewStarCTF Week1 個人復現

【Web】NewStarCTF Week1 個人復現

目錄 ①泄露的秘密 ②Begin of Upload ③Begin of HTTP ④ErrorFlask ⑤Begin of PHP ⑥R!C!E! ⑦EasyLogin ①泄露的秘密 盲猜/robots.txt,訪問得到flag前半部分 第二個沒試出來&#xff0c;老老實實拿dirsearch掃吧 訪問/www.zip 下載附件&#xff0c;拿到第二部分…
閱讀更多...
SpringCloud原理-OpenFeign篇（一、Hello OpenFeign項目示例）

SpringCloud原理-OpenFeign篇（一、Hello OpenFeign項目示例）

文章目錄 前言正文一、項目結構二、服務調用鏈路說明三、Rpc調用鏈路說明四、項目代碼4.1 client 模塊中的feign接口4.2 client 中的rest接口4.3 client 中的啟動類4.4 server中的rest接口4.5 server中的配置文件 五、調試 附錄附1&#xff1a;本系列文章鏈接 前言 本篇是Spri…
閱讀更多...
示波器探頭講解及案例分享

示波器探頭講解及案例分享

示波器探頭講解 示波器探頭 分為X1、X10檔&#xff1a; X1檔&#xff0c;表示被測量的信號沒有經過衰減進入示波器 X10檔&#xff0c;表示被測量的信號衰減10倍進入示波器&#xff08;當示波器也設置為10X檔&#xff0c;直接讀數即可&#xff0c;但是當示波器設置為1X檔&…
閱讀更多...
vue 目錄樹的展開與關閉

vue 目錄樹的展開與關閉

目錄 1、翻頁方法中控制目錄樹節點的展開與關閉2、搜索目錄樹節點名稱控制節點的展開與關閉 <el-tree:data"data_option"ref"tree":props"defaultProps"node-click"handleNodeClick":default-expanded-keys"needExpandedKeys&…
閱讀更多...
1、開發工具介紹及軟件安裝

1、開發工具介紹及軟件安裝

軟件安裝 百度網盤鏈接&#xff1a;https://pan.baidu.com/s/1J7sgXntt9eLNBhI1Dc6MsQ?pwd2023 提取碼&#xff1a;2023 # 一 Keil5安裝步驟&#xff1a; 激活&#xff1a; STC-ISP安裝步驟&#xff1a; STC-ISP.exe安裝即用 安裝CH340_CH341驅動程序 所有學習課程和資源…
閱讀更多...
【vue】ant-design-vue的樹結構實現節點增刪改查

【vue】ant-design-vue的樹結構實現節點增刪改查

根據業務需要&#xff0c;實現樹結構的節點新增編輯刪除功能&#xff0c;主要邏輯是利用樹節點的scopedSlots屬性對其進行自定義改造&#xff0c;監聽懸停事件在節點右側出現增刪改對應圖標&#xff0c;點擊圖標出現彈窗表單對內容進行修改&#xff0c;具體代碼如下&#xff1a…
閱讀更多...
藍橋杯每日一題2023.11.23

藍橋杯每日一題2023.11.23

題目描述 題目分析 本題使用遞歸模擬即可&#xff0c;將每一個大格子都可以拆分看成幾個小格子&#xff0c;先將最開始的數字進行填入&#xff0c;使每一個對應小格子的值都為大格子對應的數&#xff0c;搜索找到符合要求的即可 &#xff08;答案&#xff1a;50 33 30 41&am…
閱讀更多...
Vue3+ts學習筆記2

Vue3+ts學習筆記2

<script setup lang"ts"> import {onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from vueonBeforeMount(()>{console.log(---掛載之前---) })onMounted(()>{console.log(---掛載---) })onBeforeUpdate(()>{consol…
閱讀更多...
Python爬取京東商品銷售數據進行數據分析示例代碼，以口紅為例

Python爬取京東商品銷售數據進行數據分析示例代碼，以口紅為例

文章目錄 一、準備工作驅動安裝模塊使用與介紹 二、流程解析三、完整代碼四、效果展示關于Python技術儲備一、Python所有方向的學習路線二、Python基礎學習視頻三、精品Python學習書籍四、Python工具包項目源碼合集①Python工具包②Python實戰案例③Python小游戲源碼五、面試資…
閱讀更多...
git代碼提交命令(如何提交代碼)

git代碼提交命令(如何提交代碼)

# 提交暫存區到倉庫區 $ git commit -m [message]# 提交暫存區的指定文件到倉庫區 $ git commit [file1] [file2] ... -m [message]# 提交工作區自上次commit之后的變化&#xff0c;直接到倉庫區 $ git commit -a# 提交時顯示所有diff信息 $ git commit -v# 使用一次新的commit…
閱讀更多...
2023年中國釩鐵產量及行業進出口現狀分析[圖]

2023年中國釩鐵產量及行業進出口現狀分析[圖]

釩鐵&#xff0c;銀白色塊狀&#xff0c;一般分為桶裝或噸袋包裝&#xff0c;根據釩含量的不同分為50釩鐵&#xff08;FeV50&#xff09;和80釩鐵&#xff08;FeV80&#xff09;,通過爐外法或電爐法冶煉生產&#xff0c;北方多以爐外法制取&#xff0c;南方多為電爐法生產。 釩…
閱讀更多...
Chrome瀏覽器將從2024年6月開始限制廣告攔截器

Chrome瀏覽器將從2024年6月開始限制廣告攔截器

雖然一年前&#xff0c;谷歌公司已經暫停推出新的“Manifest V3”擴插件展格式&#xff0c;原因是這種新格式會對 Chrome 中一些最受歡迎的擴展插件造成嚴重損害&#xff1b;一年后今天&#xff0c;Google 正在重新啟動該計劃&#xff0c;逐步淘汰 Chrome 擴展程序當前的 Manif…
閱讀更多...
Faster R-CNN源碼解析(一)

Faster R-CNN源碼解析(一)

目錄 前言訓練腳本(train_mobilenetv2.py)自定義數據集(my_dataset.py) 前言 Faster R-CNN 是經典的two-stage目標檢測模型&#xff0c; 原理上并不是很復雜&#xff0c;也就是RPNFast R-CNN&#xff0c;但是在代碼的實現上確實有很多細節&#xff0c;并且源碼也非常的多&…
閱讀更多...
chatglm3部署使用

chatglm3部署使用

chatglm3部署使用 1.部署2.使用3.接入微信4.vue前端 1.部署 1.首先去github下載chatglm3代碼。Huggingface下載模型一直失敗&#xff0c;所以用阿里的魔塔社區下載。 git clone https://github.com/THUDM/ChatGLM3.git git clone https://www.modelscope.cn/ZhipuAI/chatglm3…
閱讀更多...
docker常見問題匯總

docker常見問題匯總

docker常見問題 ?問題1&#xff1a;啟動docker容器時&#xff0c;報錯Unknown runtime specified nvidia. 當我啟動一個容器時&#xff0c;運行以下命令&#xff1a; docker run --runtimenvidia 。。。。 后面一部分命令沒寫出來&#xff0c;此時報錯的信息如下&#xff1a;…
閱讀更多...
python-opencv劃痕檢測

python-opencv劃痕檢測

python-opencv劃痕檢測 這次實驗&#xff0c;我們將對如下圖片進行劃痕檢測&#xff0c;其實這個比較有難度&#xff0c;因為清晰度太差了。 我們做法如下&#xff1a; &#xff08;1&#xff09;讀取圖像為灰度圖像&#xff0c;進行自適應直方圖均衡化處理&#xff0c;增強圖…
閱讀更多...
thingsboard3.6的mailConfigTemplateController錯誤

thingsboard3.6的mailConfigTemplateController錯誤

1、bug內容 使用3.6版本的tb代碼進行打包生成boot的jar包，在啟動的時候會報錯mailConfigTemplateController bean初始化找不到文件路徑。 Error creating bean with name mailConfigTemplateController defined in URL [jar:file:/D:/yuxinwei/AE/thingsboard/thingsboard-3…
閱讀更多...
nuxt3項目修改端口號

nuxt3項目修改端口號

nuxt的默認端口號是3000 一、修改開發環境端口號 方式一&#xff1a;使用環境變量配置,設置&#xff08;PORT 或 NUXT_PORT&#xff09; # .env PORT3001 #http://localhost:3001/ NITRO_PORT3001 #http://localhost:3001/ 方式二&#xff1a;nuxt.config.ts里配置…
閱讀更多...
最新文章

Copyright @ 2022~2023