Vuejas提高篇
- 事件處理指令
- 對一個數進行加減運算
- 條件渲染指令
- v-if指令
- v-else指令和v-else-if指令
- v-if指令和v-show指令
- 回圈遍歷指令
- 遍歷物件屬性
- 遍歷陣列元素
- 綜合案例(添加洗掉員工資訊)
事件處理指令
我們可以用 v-on 指令系結一個事件監聽器，通過它呼叫我們 Vue 實體中定義的方法，
v-on指令可以簡寫為：@
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<button v-on:click="pointme">點擊我</button>
<!-- v-on指令的簡寫 -->
<button @click="pointyou">點擊你</button>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
},
methods:{
pointme(){
alert('點擊了我');
},
pointyou(){
alert('點擊了你');
}
}
});
</script>
</body>
</html>
效果動圖：
對一個數進行加減運算
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<button v-on:click="add(1)">加</button>
<button @click="subtract(1)">減</button>
<br/>
num:{{num}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
num:0
},
methods:{
add(value){
this.num += value;
},
subtract(value){
this.num -= value;
}
}
});
</script>
</body>
</html>
效果動圖：
條件渲染指令
條件渲染指令，可以根據條件判斷，來設定元素的顯示與隱藏，
v-if指令
當v-if的值為false時，網頁中將不會對此元素進行渲染，
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div v-if="isShow1">DOM元素的樣式系結1</div>
<div v-if="isShow2">DOM元素的樣式系結2</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
isShow1:false,
isShow2:true
}
});
</script>
</body>
</html>
效果截圖：
從效果圖可以發現
DOM元素的樣式系結1并沒有顯示出來，因為v-if=false時，網頁中將不會對此元素進行渲染，
v-else指令和v-else-if指令
我們可以使用 v-else 指令來表示 v-if 的“else 塊”，v-else 元素必須緊跟在 v-if 或者 v-else-if 元素的后面——否則它將不會被識別，而v-else-if則是充當 v-if 的“else-if 塊”，可以鏈式地使用多次，
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div v-if="type==1">A</div>
<div v-else-if="type==2">B</div>
<div v-else-if="type==3">C</div>
<div v-else>D</div>
<div v-if="type2==1">AA</div>
<div v-else-if="type2==2">BB</div>
<div v-else-if="type2==3">CC</div>
<div v-else>DD</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
type:3,
type2:5
}
});
</script>
</body>
</html>
效果截圖：
v-if指令和v-show指令
v-show也是根據條件展示元素的指令，帶有 v-show 的元素始侄訓被渲染并保留在 DOM 中， v-show 是簡單地切換元素的 CSS 屬性 display ，
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div v-if="isShow">這里是v-if</div>
<div v-show="isShow">這里是v-show</div>
<div v-if="isShow1">這里是v-if1</div>
<div v-show="isShow1">這里是v-show1</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
isShow:false,
isShow1:true
}
});
</script>
</body>
</html>
效果截圖：
通過上面的例子，我們可以發現兩者的不同：
1. v-if是真正的條件渲染，因為它會確保在切換程序中條件塊內的事件監聽器和子組件適當地被銷毀和重建，
2. v-if是惰性的，只有當條件為true時才會渲染，如果條件為false則什么都不做，
3. v-if有很高的切換開銷，適用于條件不太容易改變的時候，
4. v-show不管條件是true還是false都會進行渲染，并且只是簡單地基于 CSS 進行切換，
5. v-show有很高的初始渲染開銷，適用于非常頻繁地切換，
回圈遍歷指令
vue.js 的回圈渲染是依賴于 v-for 指令，它能夠根據 vue 的實體里面的資訊，回圈遍歷所需資料，然后渲染出相應的內容，它可以遍歷陣列型別以及物件型別的資料，js 里面的陣列本身實質上也是物件，這里遍歷陣列和物件的時候，方式相似但又稍有不同，
遍歷物件屬性
value 是遍歷得到的屬性值，key 是遍歷得到的屬性名，index 是遍歷次序，這里的 key、index 都是可選引數，如果不需要，這個指令其實可以寫成 v-for=“value in user”，
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p v-for="(value,key,index) in user">{{index}}：{{key}} ：{{value}} </p>
<hr>
<p v-for="value in user">{{value}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
user:{
userId:999999,
userName:'牛哄哄的柯南',
userSex:'男'
}
}
});
</script>
</body>
</html>
效果截圖：
遍歷陣列元素
value 是遍歷得到的元素，index 是陣列下標，這里的index 也是可選引數，如果不需要，這個指令其實可以寫成 v-for=“value in userArr”，
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p v-for="(item,index) in userArr">
{{index}}--{{item.userId}}:{{item.userName}}:{{item.userSex}}
<button @click="operate(index)">操作</button>
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
userArr: [{
userId: 1,
userName: '張三',
userSex: '男'
}, {
userId: 2,
userName: '李四',
userSex: '女'
}, {
userId: 3,
userName: '王五',
userSex: '男'
}]
},
methods:{
operate(index){
console.log(this.userArr[index]);
}
}
});
</script>
</body>
</html>
效果截圖：
綜合案例(添加洗掉員工資訊)
需求效果圖：
完整代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
#app{
width: 500px;
}
table{
width: 100%;
border-collapse: collapse;
}
table tr th,table tr td{
height: 35px;
border : solid 1px #999;
text-align: center;
}
.clear-btn{
text-align: right;
}
</style>
</head>
<body>
<div id="app">
<table>
<tr>
<th>編號</th>
<th>姓名</th>
<th>年齡</th>
<th>操作</th>
</tr>
<tr v-for="(obj,index) in arr">
<td>{{obj.userId}}</td>
<td>{{obj.userName}}</td>
<td>{{obj.userAge}}</td>
<td><button @click="del(index)" >洗掉</button></td>
</tr>
<tr >
<td colspan="4"> <button @click="clear()" >清空</button></td>
</tr>
</table>
<h3>添加:</h3>
姓名：<input type="text" v-model="userName"><br>
年齡：<input type="text" v-model="userAge"><br>
<button @click="add">添加</button>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
arr: [{
userId: 1,
userName: '張三',
userAge: 20
}, {
userId: 2,
userName: '李四',
userAge: 21
}, {
userId: 3,
userName: '王五',
userAge: 22
}],
userName:'',
userAge:null,
},
methods:{
del(index){
//this Vue實體
this.arr.splice(index,1);
},
clear(){
this.arr = [];
},
add(){
//獲取控制元件
let userName = this.userName;
let userAge = this.userAge;
let userId = (this.arr.length +1);
this.arr.push({
userId,
userName,
userAge
})
this.userName=''; // 輸入后清空
this.userAge=''; // 輸入后清空
}
}
});
</script>
</body>
</html>
添加效果：
洗掉清空效果：
看完如果對你有幫助，感謝點贊支持！
如果你是電腦端的話，看到右下角的 “一鍵三連” 了嗎，沒錯點它[哈哈]
加油！
共同努力！
Keafmd
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/229884.html
標籤：其他
上一篇：可拖拽組件slider.js