Vue.js知識
- v-if && v-else
-
- 使用者登入切換的案例
- v-show
- v-for
-
- 數組中哪些方法是響應式的
- 購物車案例
v-if && v-else
<body>
<div id="app">
<h2 v-if="isShow">{{message}}</h2>
<h2 v-else>如果資訊為false，就顯示我</h2>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"hello Vue",
isShow:"ture"
}
})
</script>
使用者登入切換的案例
<body>
<div id="app">
<span v-if="isUser">
<label for="username">帳号登入</label>
<input type="text" id="username" placeholder="使用者帳号">
</span>
<span v-else>
<label for="email">郵箱登入</label>
<input type="text" id="email" placeholder="使用者郵箱">
</span>
<button @click="isUser = !isUser">切換登入方式</button>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"如果資訊為true，就顯示我",
isShow:"true",
isUser:"true"
}
})
</script>
</body>
但是這種方法有小問題，如果在有輸入内容的情況下，切換了類型，就會發現文字依然顯示之前的輸入的内容。
按道理來說，切換到另一input元素中，在另一個input中應該會被清空。
解答：這是因為Vue進行DOM渲染時，出于性能考慮，會盡可能的複用已經存在的元素，而不是重新建立新的元素，是以在上面案例，Vue内部方向原來的input元素不再使用，直接作為else中的input使用了。
解決方法：
如果不希望這種情況出現，可以給對應的input元素添加key，并且需要保證key不同
<span v-if="isUser">
<label for="username">帳号登入</label>
<input type="text" id="username" placeholder="使用者帳号" key="username">
</span>
<span v-else>
<label for="email">郵箱登入</label>
<input type="text" id="email" placeholder="使用者郵箱" key="email">
</span>
v-show
可以控制頁面中的元素是否顯示
<h2 v-show="isShow">顯示h2</h2>
與上述的v-if，不同的是
v-if：當條件為false時，包含v-if指令的元素，根本不會存在dom中，直接删除
v-show:當條件為false時，v-show隻是給元素一個行内樣式，display:none;
開發中如何選擇？
當需要在顯示與隐藏之間頻繁切換時，選擇v-show
如果隻有一次切換時，通過使用v-if
v-for
在周遊對象的過程，如果隻是擷取一個值，那麼擷取的是value
<ul><li v-for="value in info">{{value}}</li></ul>
如果想擷取兩個值
<ul><li v-for="(key,value) in info">{{value}}:{{key}}</li></ul>
第一個值為value,第二值為key
官方推薦在使用v-for的時候，給對應的元素或者元件添加一個key屬性
數組中哪些方法是響應式的
<body>
<div id="app">
<ul><li v-for="item in info">{{item}}</li></ul>
<button @click="add">添加元素</button>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"如果資訊為true，就顯示我",
isShow:"true",
isUser:"true",
info:["a","b","c","d"]
},
methods:{
add(){
//1.push()
//this.info.push("aaa");
//2.通過索引值
//this.letters[0] = "aaaa";
}
}
})
</script>
</body>
1、push 方法是響應式的
2、通過索引值修改，不是響應式
this.info[0] = "aaaa";
3、pop(将數組最後的元素删除)，shift(将數組第一個的元素删除)，是響應式的
4、unshift(将元素添加到數組的最前面，可添加多個值)，也是響應式的
5、splice(): 注意 這種方法會改變原始數組。
删除元素：第一個參數是開始删除的位置，第二參數是删除多少個元素。如果僅删除一個元素，則傳回一個元素的數組。 如果未删除任何元素，則傳回空數組。
插入元素：第一個參數是開始插入的位置，第二個參數是0，後面參數是插入的元素。
替換元素：第一個參數是開始添加的位置，第二個參數是要替換多少個元素，後面參數是替換的元素。
購物車案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
<style>
table {
border: 1px solid #e9e9e9;
border-collapse: collapse;
border-spacing: 0;
}
th,
td {
padding: 8px 16px;
border: 1px solid #e9e9e9;
text-align: left;
}
th {
background-color: #f7f7f7;
color: #5c6b77;
font-weight: 600;
}
</style>
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<th></th>
<th>書籍名稱</th>
<th>出版日期</th>
<th>價格</th>
<th>購買數量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>{{getFinalPrice(item.price)}}</td>
<td>
<button @click="increment(index)">-</button>
{{item.count}}
<button @click="decrement(index)">+</button>
</td>
<td><button @click="removeHanle(index)">移除</button></td>
</tr>
</tbody>
</table>
<h2>總價格:{{totalprice}}</h2>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
books: [
{
id: 1,
name: "《算法導論》",
date: "2006-9",
price: 85.00,
count: 1
},
{
id: 2,
name: "《程式設計藝術》",
date: "2008-10",
price: 59.00,
count: 1,
},
{
id: 3,
name: "《程式設計珠玑》",
date: "2010-5",
price: 128.00,
count: 1,
},
{
id: 4,
name: "《代碼大全》",
date: "2016-6",
price: 95.00,
count: 1,
}
],
isShow:"true"
},
methods: {
getFinalPrice(price) {
return "￥" + price.toFixed(2)
},
increment(index) {
if (!this.books[index].count) {
this.books[index].count = 0;
} else {
this.books[index].count--;
}
},
decrement(index) {
this.books[index].count++;
},
removeHanle(index){
this.books.splice(index,1);
}
},
computed:{
totalprice(){
let result = 0;
for(let i = 0;i<this.books.length;i++){
result += (this.books[i].price)* (this.books[i].count);
}
return this.getFinalPrice(result);
}
}
})
</script>
</body>
</html>