<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08-常用指令v-if</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--
1.什麼是v-if指令
條件渲染: 如果v-if取值是true就渲染元素, 如果不是就不渲染元素
2.v-if特點:
如果條件不滿足根本就不會建立這個元素(重點)
3.v-if注意點
v-if可以從模型中獲取資料
v-if也可以直接賦值一個表示式
-->
<!--
4.v-else指令
v-else指令可以和v-if指令配合使用, 當v-if不滿足條件時就執行v-else就顯示v-else中的內容
5.v-else注意點
v-else不能單獨出現
v-if和v-else中間不能出現其它內容
-->
<!--
6.v-else-if指令
v-else-if可以和v-if指令配合使用, 當v-if不滿足條件時就依次執行後續v-else-if, 哪個滿足就顯示哪個
7.v-else-if注意點
和v-else一樣
-->
<!--這裡就是MVVM中的View-->
<div id="app">
<!-- <p v-if="show">我是true</p>-->
<!-- <p v-if="hidden">我是false</p>-->
<!-- <p v-if="true">我是true</p>-->
<!-- <p v-if="false">我是false</p>-->
<!-- <p v-if="age >= 18">我是true</p>-->
<!-- <p v-if="age < 18">我是false</p>-->
<!-- <p v-if="age >= 18">成年人</p>-->
<!-- <p>中間的內容</p>-->
<!-- <p v-else>未成年人</p>-->
<p v-if="score >= 80">優秀</p>
<p v-else-if="score >= 60">良好</p>
<p v-else>差</p>
</div>
<script>
let vue = new Vue({
el: '#app',
data: {
show: true,
hidden: false,
age: 17,
score: 50
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09-常用指令v-show</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--
1.什麼是v-show指令
v-show和v-if的能夠一樣都是條件渲染, 取值為true就顯示, 取值為false就不顯示
2.v-if和v-show區別
v-if: 只要取值為false就不會建立元素
v-show: 哪怕取值為false也會建立元素, 只是如果取值是false會設定元素的display為none
3.v-if和v-show應用場景
由於取值為false時v-if不會建立元素, 所以如果需要切換元素的顯示和隱藏, 每次v-if都會建立和刪除元素
由於取值為false時v-show會建立元素並設定display為none, 所有如果需要切換元素的顯示和隱藏,
不會反覆建立和刪除, 只是修改display的值
所以: 如果企業開發中需要頻繁切換元素顯示隱藏, 那麼推薦使用v-show, 否則使用v-if
-->
<!--這裡就是MVVM中的View-->
<div id="app">
<!-- <p v-show="show">我是true</p>-->
<!-- <p v-show="hidden">我是false</p>-->
<!-- <p v-show="true">我是true</p>-->
<!-- <p v-show="false">我是false</p>-->
<!-- <p v-show="age >= 18">我是true</p>-->
<!-- <p v-show="age < 18">我是false</p>-->
<p v-show="show">我是段落1</p>
<p v-show="hidden">我是段落2</p>
</div>
<script>
let vue = new Vue({
el: '#app',
data: {
show: true,
hidden: false,
age: 18
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10-常用指令v-for</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--
1.什麼是v-for指令
相當於JS中的for in迴圈, 可以根據資料多次渲染元素
2.v-for特點
可以遍歷 陣列, 字元, 數字, 物件
-->
<!--這裡就是MVVM中的View-->
<div id="app">
<ul>
<!-- <li v-for="(value, index) in list">{{index}}---{{value}}</li>-->
<!-- <li v-for="(value, index) in 'abcdefg'">{{index}}---{{value}}</li>-->
<!-- <li v-for="(value, index) in 6">{{index}}---{{value}}</li>-->
<li v-for="(value, key) in obj">{{key}}---{{value}}</li>
</ul>
</div>
<script>
let vue = new Vue({
el: '#app',
data: {
list: ["張三", "李四", "王五", "趙六"],
obj: {
name: "lnj",
age: 33,
gender: "man",
class: "知播漁"
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10-常用指令v-bind</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--
1.什麼是v-bind指令
在企業開發中想要給"元素"繫結資料, 我們可以使用{{}}, v-text, v-html
但是如果想給"元素的屬性"繫結資料, 就必須使用v-bind
所以v-bind的作用是專門用於給"元素的屬性"繫結資料的
2.v-bind格式
v-bind:屬性名稱="繫結的資料"
:屬性名稱="繫結的資料"
3.v-bind特點
賦值的資料可以是任意一個合法的JS表示式
例如: :屬性名稱="age + 1"
-->
<!--這裡就是MVVM中的View-->
<div id="app">
<!-- <p>{{name}}</p>-->
<!-- <p v-text="name"></p>-->
<!-- <p v-html="name"></p>-->
<!--注意點: 如果要給元素的屬性繫結資料, 那麼是不能夠使用插值語法的-->
<!-- <input type="text" value="{{name}}">-->
<!--注意點: 雖然通過v-model可以將資料繫結到input標籤的value屬性上
但是v-model是有侷限性的, v-model只能用於input/textarea/select
但是在企業開發中我們還可能需要給其它標籤的屬性繫結資料-->
<!-- <input type="text" v-model="name">-->
<!-- <input type="text" v-bind:value="name">-->
<!-- <input type="text" :value="name">-->
<input type="text" :value="age + 1">
</div>
<script>
let vue = new Vue({
el: '#app',
data: {
name: "知播漁666",
age: 18
}
});
</script>
</body>
</html>
我正在跟著江哥學程式設計, 更多前端+區塊鏈課程: www.it666.com