v-bind
前面学习的指令主要作用是将值插入到我们模板的内容当中,但是除了内容需要动态决定外,某些属性也需要动态来绑定。
比如动态绑定a元素的href属性,动态绑定img元素的src属性。动态指定属性不能使用Mustache语法。
<div id="app">
动态指定属性
<a v-bind:href="url">百度</a>
</div>
<script type="text/javascript">
const app=new Vue({
//el指定要挂载的元素
el:'#app',
data:{
url:'http://www.baidu.com'
}
})
</script>
语法糖(简写形式): 直接写:
<a :href="url">百度</a>
v-bind动态绑定class
- 对象语法(类名确定,不确定用不用)
<标签 v-bind:class={类名1:布尔值,类名2:布尔值,...,...}>这是一个伪代码式的说明</标签>
如果类名的布尔值为true,那么该类就附加至所在标签。
一般把布尔值用变量写到data中
<style type="text/css">
.color{
color: red;
}
</style>
<script src="vue/vue.js" type="text/javascript" charset="utf-8"></script>
<div id="app">
//:是v-bind的语法糖,对象中的键值对,键名为类名,值是布尔型,决定该类是否附加至元素
<h2 :class="{color:see}">{{message}}</h2>
</div>
<script type="text/javascript">
const app=new Vue({
//el指定要挂载的元素
el:'#app',
data:{
message:'祖国,你好!',
see:true
}
})
</script>
标签前边也有固定的class的话,会做合并,不会覆盖
<h2 class="固定的类名" :class="{color:see}">{{message}}</h2>
可以通过方法或者计算属性把{color:see}对象return。
- 数组语法
<标签 :class="[data中值为类名字符串的变量]"></标签>
<style type="text/css">
.color{
color: red;
}
</style>
<script src="vue/vue.js" type="text/javascript" charset="utf-8"></script>
<div id="app">
//:是v-bind的语法糖,数组中的元素实际上指向类名
<h2 :class="[isRed]">{{message}}</h2>
</div>
<script type="text/javascript">
const app=new Vue({
//el指定要挂载的元素
el:'#app',
data:{
message:'祖国,你好!',
isRed:'color'
}
})
</script>
- 作业:点击列表某项,该项文字调整为红色
<div id="app">
<!--index==currentIndex为重点-->
<h2 v-for="(item,index) in moives" :class="{color:index==currentIndex}" @click="changeColor(index)">{{index}}-{{item}}</h2>
</div>
<script type="text/javascript">
const app=new Vue({
el:'#app',
data:{
moives:['刘德华','周润发','梁朝伟','黎明'],
currentIndex:-1
},
methods:{
changeColor:function(i){
this.currentIndex=i
}
}
})
</script>
v-bind动态绑定style
- 对象语法
<标签 v-bind:style={属性名1:属性值1,属性名2:属性值2,...,...}>这是一个伪代码式的说明</标签>
属性名有两种写法:1."-"连接,与原css写法一样,但是需要使用引号括起来,否则解析报错;2.使用驼峰写法代替"-",最省事
属性值常量要加单引号
<!-- 值的错误写法,不加引号解析为变量 -->
<h2 :style="{'font-size':34px}">世界你好</h2>
<!-- 属性名使用-写法,需要引号括起来,否则报错 -->
<h2 :style="{'font-size':'34px'}">世界你好</h2>
<!-- 驼峰写法,属性名不用加引号 -->
<h2 :style="{fontSize:'55px'}">Vue世界</h2>
<div id="app">
<!-- 驼峰写法,属性名不用加引号 -->
<h2 :style="{fontSize:currentValue1}">Vue世界</h2>
<!-- 指定fontsize时,没有加单位写法 -->
<h2 :style="{fontSize:currentValue2+'px'}">javascript世界</h2>
</div>
<script type="text/javascript">
const app=new Vue({
el:'#app',
data:{
currentValue1:'100px',
currentValue2:10
}
}
</script>
- 数组语法
数组中每个元素可以设置为键值对形式的对象。
<div id="app">
<!-- 数组写法,数组的每个元素为对象 -->
<h2 :style="[size,color]">Vue世界</h2>
</div>
<script type="text/javascript">
const app=new Vue({
el:'#app',
data:{
size:{fontSize:'50px'},
color:{color:'red'}
}
})
</script>