v-bind 指令
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>v-bind 实例</title>
<!--引入Vue.js-->
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-bind实例:绑定css属性、html属性</h1>
<div id="app">
v-bind:src绑定连接：<br><br>
<img v-bind:src="imgSrc" width="200px">
<hr>
:src绑定连接 简写：<br><br>
<img :src="imgSrc" width="200px">
<hr>
在绑定CSS样式，绑定的值必须在vue中的data属性中进行声明。 1、直接绑定class样式<br><br>
<div :class="className">1、绑定classA</div>
<hr>
在isOK为true时显示样式，在isOk为false时不显示样式。这里classA直接是css中的classA<br><br>
<div :class="{classA:isOk}">2、绑定class中的判断</div>
<div>
<input type="checkbox" id="isOK" v-model="isOk"><br><br>
<label for="isOK">isOK:{{isOk}}</label>
</div>
<hr>
<br><br>
<div :class="[classA,classB]">3、绑定class中的数组</div>
<hr>
<br><br>
<div :class="isOk?classA:classB">4、绑定class中的三元表达式判断</div>
<hr>
这里的color直接是style中的color，因为使用了大括号
<br><br>
<div :style="{color:red,fontSize:font}">5、绑定style</div>
<hr>
<br><br>
<div :style="styleObject">6、用对象绑定style样式</div>
</div>
<style>
.classA{
color: red;
}
.classB{
font-size: 150%;
}
</style>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
imgSrc:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2479868600,3102914300&fm=26&gp=0.jpg',
className:'classA',
isOk:true,
classA:'classA',
classB:'classB',
red:'blue',
font:'20px',
styleObject:{
color:'green',
fontSize:'40px'
}
}
})
</script>
</body>
</html>
