<style>
.bg{
background-color: red;
}
.border{
border:solid rgb(44, 34, 34) 4px;
}
.round{
border-radius: 8px;
}
.aaa{
height:100px;
}
</style>
</head>
<body>
<div id="app">
<select v-model="imgsrc">
<option value="img/a.jpeg">图片1</option>
<option value="img/b.jpg">图片2</option>
<option value="img/c.jpg">图片3</option>
</select>
<p>{{imgsrc}}</p>
<!-- {{}}只能绑定标签内容，不能绑定标签属性 -->
<!-- <img src="{{imgsrc}}" alt=""> 错误写法-->
<!-- 属性绑定需要使用 v-bind指令，格式为v-bind:属性名="属性值" -->
<!-- 属性值可以是数据或表达式 -->
<!-- <img v-bind:src="imgsrc"> -->
<!-- v-bind: 指令可以缩写为 : -->
<!-- v-once指令 一次性插值，数据不会改变 -->
<!-- <img :src="imgsrc" v-once> -->
<img :src="imgsrc">
<hr>
<label for="">背景色</label>
<input type="checkbox" v-model="classes" value="bg">
<label for="">边框</label>
<input type="checkbox" v-model="classes" value="border">
<label for="">圆角</label>
<input type="checkbox" v-model="classes" value="round">
<!-- clss属相可以绑定一个数组，数组中存放需要设置的class 的值-->
<div :class="classes" class="aaa">
clss属性和其他属性不同,绑定一般不直接绑定字符串。
</div>
<br>
<br>
<br>
<hr>
<label for="">背景色</label>
<input type="checkbox" v-model="obj.bg" value="bg">
<label for="">边框</label>
<input type="checkbox" v-model="obj.border" value="border">
<label for="">圆角</label>
<input type="checkbox" v-model="obj.round" value="round">
<!-- class属性除了可以绑定数组，还可以绑定对象 -->
<!-- 对象中键是class值，值是布尔值，表示元素的class列表中是否有这个class -->
<div :class="obj">
class还可以绑定对象
</div>
<br>
<hr>
<!-- 标签的style属性一般也不直接绑定字符串，而是绑定一个对象 -->
<!-- 对象中键是样式名，值是样式值 -->
<div :style="styleobj">
style属性绑定对象
</div>
<br>
<hr>
<!-- 对于只有属性名，没有属性值得属性，可以绑定一个bool值来控制属性是否存在 true存在 false不存在-->
<button :disabled="true"></button>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
imgsrc:"",
classes:["bg","border","round"],
obj:{
bg:true,
border:true,
round:true,
},
styleobj:{
color:"red",
" background-color":"red",
}
},
})
</script>
</body>