<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>
