vue.js v-bind v-show
1.v-bind
class 與 style 是 HTML 元素的屬性，用于設置元素的樣 式，我們可以用 v-bind 來設置樣式屬性。
Vue.js v-bind 在處理 class 和 style 時， 專門增強了它。表達式的結果類型除了字符串之外，還可以是對象或數組。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../diyitain/js/vue.js"></script>
</head>
<body>
<div class="box">
<img :src="url" alt="">
<a href=""></a>
</div>
<script>
new Vue({
el:'.box',
data:{
url:'timg.jpg',
aa:''
}
})
</script>
</body>
</html>
-----------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../diyitain/js/vue.js"></script>
</head>
<body>
<div class="box"> <img v-bind:src="url" alt="" v-on:click='but'> </div>
<script>
new Vue({
el: '.box'
, data: {
url: 'timg.jpg'
, flag: true
}
, methods: {
but: function () {
if (this.flag) {
this.url = 'timg.jpg'
, this.flag = false
}
else {
this.url = '1.jpg'
, this.flag = true
}
}
}
})
</script>
</body>
</html>
==========================================================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../diyitain/js/vue.js"></script>
<style>
.box {
overflow: hidden;
}
.box ul li{
float: left;
border: 1px #000 solid;
padding: 10px 20px;
list-style: none;
}
</style>
</head>
<body>
<div class="box">
<img :src="url" alt="">
<ul>
<li v-for='(velue,index) in arr' v-on:click='but(index)'>{{index+1}}</li>
</ul>
</div>
<script>
new Vue({
el:'.box',
data:{
url:'bg1.jpg',
arr:['bg1.jpg','bg2.jpg','3.jpg','bg4.jpg','5.jpg']
},
methods:{
but:function(ind){
this.url=this.arr[ind]
}
}
})
</script>
</body>
</html>
2. v-show 顯示與隱藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../diyitain/js/vue.js"></script>
</head>
<body>
<div class="box">
<h1> {{msg}} </h1>
<h3 v-show='!see'> {{msg}} </h3>
</div>
<script >
new Vue({
el:'.box',
data:{
msg:'ni',
see:true
}
})
</script>
</body>
</html>
-------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../diyitain/js/vue.js"></script>
<style>
.list{
background-color: #000;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box">
<button v-on:click='but'>qqq</button>
<div class="list" v-show='see'></div>
</div>
<script>
new Vue({
el:'.box',
data:{
see:true
},
methods:{
// but:function(){
// this.see=!this.see
// }
but:function(){
if(this.see){
this.see=false
}else{
this.see=true
}
}
}
})
</script>
</body>
</html>
3. v-if v-else v-els-if 條件判斷
1.v-if 條件判斷使用 v-if 指令
2. v-else 可以用 v-else 指令給 v-if 添加一個 "else" 塊
3.v-else-if 在 2.1.0 新增，顧名思義，用作 v-if 的 else-if 塊。可以鏈式的多次使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue </title>
<script src="../diyitain/js/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="type === 'A'"> A </div>
<div v-else-if="type === 'B'"> B </div>
<div v-else-if="type === 'C'"> C </div>
<div v-else> Not A/B/C </div>
</div>
<script>
new Vue({
el: '#app',
data: {
type: 'C'
}
})
</script>
</body>
</html>
