阿菜的Vue学习之旅(四)
1.v-bind指令的使用
index.html
<div id="myPet">
<!--v-bind指令,能够获取从数据库中传递的动态数据,在这里它通过vue实例中的data绑定元素中的src、herf-->
<img v-bind:src="catSrc" alt="cat"/>
<img v-bind:src="dogSrc" alt="dog"/>
<a v-bind:href="url01">大嘴狗宠物店</a>
<br/>
<!--可以使用语法糖,用:代替v-bind:-->
<img :src="catSrc" alt="cat"/>
<img :src="dogSrc" alt="dog"/>
<a :href="url01">大嘴狗宠物店</a>
</div>
<script src="../js/vue.js"></script>
<script src="../js/demo.js"></script>
demo.js
let myPet = new Vue({
el: '#myPet',
data: {
catSrc: 'https://img11.360buyimg.com/ceco/s600x600_jfs/t1/192041/40/866/77176/608d0eedE7fc85c25/d7ffe51b83a86211.jpg!q70.jpg',
dogSrc: 'https://img13.360buyimg.com/ceco/s600x600_jfs/t1/162015/32/20983/100165/60868c68Ecec19e43/f504bebf3ed6dbe9.jpg!q70.jpg',
url01: 'http://www.bmd520.com/'
}
})
运行结果:
2.v-bind指令动态绑定class(对象语法)
index.html
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">@import "../css/render.css";</style>
</head>
<body>
<div id="myBtn">
<h2>请问斋藤飞鸟是你的女神吗?</h2>
<img id="myImg" :src="myUrl" alt="myGoddess"/><br/><br/>
<!--:class="{key01: boolean, key02: boolean}",当key01为true时,class="key01",然后显示class为key01的css样式。同样的,当key02为true时,界面也会显示key02的css样式。-->
<button :class="{btn01: isBtn01, btn02: isBtn02}" v-on:click="myClick" ref="#">YES</button>
</div>
<script src="../js/vue.js"></script>
<script src="../js/demo.js"></script>
</body>
render.css
#myImg{
width: 50em;
height: 30em;
}
.btn01 {
box-shadow: 0 1px 0 0 #fff6af;
background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
background-color:#ffec64;
border-radius:6px;
border:1px solid #ffaa22;
display:inline-block;
cursor:pointer;
color:#333333;
font-family: Arial, serif;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:01px 0 #ffee66;
}
.btn01:hover {
background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
background-color:#ffab23;
}
.btn01:active {
position:relative;
top:1px;
}
.btn02 {
box-shadow:inset 0 1px 0 0 #dcecfb;
background:linear-gradient(to bottom, #bddbfa 5%, #80b5ea 100%);
background-color:#bddbfa;
border-radius:6px;
border:1px solid #84bbf3;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family: Arial, serif;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0 1px 0 #528ecc;
}
.btn02:hover {
background:linear-gradient(to bottom, #80b5ea 5%, #bddbfa 100%);
background-color:#80b5ea;
}
.btn02:active {
position:relative;
top:1px;
}
demo.js
let myBtn = new Vue({
el: '#myBtn',
data:{
url01: 'https://img2.baidu.com/it/u=3469048138,2470937702&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
url02: 'https://img2.baidu.com/it/u=3024324849,2907534436&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
isBtn01: true,
isBtn02: false,
myUrl: this.url01,
counter: 0
},
methods:{
myClick: function(){
this.isBtn01 = !this.isBtn01;
this.isBtn02 = !this.isBtn02;
if (this.counter === 0){
this.myUrl = this.url02;
this.counter ++;
}else{
this.myUrl = this.url01;
this.counter --;
}
}
}
})
运行结果:
点击按钮之前,图片和按钮的样式是这样的,this.isBtn01 = true;
this.isBtn02 = false; this.myUrl = this.url01
点击按钮之后,图片和按钮的样式更改了,this.isBtn01 = flase;
this.isBtn02 = true; this.myUrl = this.url02
再次点击按钮,图片和按钮的样式恢复原样 ,this.isBtn01 = true;
this.isBtn02 = false; this.myUrl = this.url01
注意
我们也可以使用使用getclasses()方法,
html文件 :
<button :class="{btn01: isBtn01, btn02: isBtn02}" v-on:click="myClick" ref="#">YES</button>
<!--如果觉得麻烦,可以使用getClasses()方法,将{btn01: isBtn01, btn02: isBtn02}作为该方法的return值,其效果和上面的一样。-->
<button :class="getClasses()" v-on:click="myClick" ref="#">YES</button>
js文件
methods:{
myClick: function(){
this.isBtn01 = !this.isBtn01;
this.isBtn02 = !this.isBtn02;
if (this.counter === 0){
this.myUrl = this.url02;
this.counter ++;
}else{
this.myUrl = this.url01;
this.counter --;
}
},
getClasses: function (){
return {btn01: this.isBtn01, btn02: this.isBtn02}
}
}
使用:class="getClasses()“的运行效果和使用:class=”{btn01: isBtn01, btn02: isBtn02}"的运行效果是一样的
3.v-bind指令动态绑定class(数组语法)
4.v-bind指令动态绑定style(对象语法)
index.html
<div class="myGoddess">
<!--格式:
v-bind:style{css属性名A: css属性值A, css属性名B: css属性值B, ...}
(格式二):style{css属性名A: css属性值A, css属性名B: css属性值B, ...
其中属性值可以是vue内部data的变量,也可以直接是属性值
-->
<h2 :style={color:myColor,border:myBorder}>斋藤飞鸟</h2>
</div>
<script src="../js/vue.js"></script>
<script src="../js/demo.js"></script>
demo.js
const myGoddess = new Vue({
el: '.myGoddess',
data: {
myColor: '#80b5ea',
myBorder: '2px solid yellow'
}
})
运行结果:
—————————————————————————— —
上一篇
阿菜的Vue学习之旅(三)
下一篇
阿菜的Vue学习之旅(五)