1.属性绑定
<script src="./vue.js"></script>
<div id="app">
<!-- 绑定 图片的src-->
<img :src="myimg" alt="">
</div>
<script>
new Vue({
el: '#app',
data: {
// 图片的路径地址
myimg:'./img/b3.jpg'
}
})
2.对象绑定
<style>
.box{
border: 1px solid red;
}
.one{
color: red;
}
.two{
font-size: 20px;
font-weight: bolder;
}
</style>
</head>
<body>
<script src="./vue.js"></script>
<div class="app">
<button @click="change">改变样式</button>
<!-- 在对象绑定中，one是页面渲染的css类名 one后面的值是可受vue动态驱动的 -->
<!-- .box类名加的样式是默认不变的，则后面是可动态变化的-->
<ul class="box" :class={one:color,two:font}>
<li>做出改变</li>
<li>做出改变</li>
<li>做出改变</li>
<li>做出改变</li>
</ul>
</div>
<script>
const vm=new Vue({
el:".app",
data:{
color:true,
font:true,
},
methods:{
change(){
this.color=!this.color
this.font=!this.font
}
}
})
</script>
3.数组绑定
<style>
.box{
border: 1px solid red;
}
.one{
color: red;
}
.two{
font-size: 20px;
font-weight: bolder;
}
</style>
</head>
<body>
<script src="./vue.js"></script>
<div class="app">
<button @click="change">改变样式</button>
<!-- .box类名加的样式是默认不变的，则后面是可动态变化的-->
<!-- class数组里面的是vue data里的属性名 -->
<ul class="box" :class=[color,font]>
<li>做出改变</li>
<li>做出改变</li>
<li>做出改变</li>
<li>做出改变</li>
</ul>
</div>
<script>
const vm=new Vue({
el:".app",
data:{
color:"one",
font:"two",
},
methods:{
change(){
// 此处用三元表达式对数组变化进行判断判断
this.color=this.color=="one"?"":"one"
this.font=this.font=="two"?"":"two"
}
}
})
</script>
