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>
