<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性与样式绑定</title>
<style>
.fontSize{
font-size: 30px;
}
.backColor{
background-color: aqua;
}
.redcolor{
color:red;
}
.bluecolor{
color:blue;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--v-bind 实现属性绑定,v-bind可以省略-->
<div>
<img v-bind:src="imgurl" :title="title" />
</div>
<div>
<input type="checkbox" :disabled="flag" />
</div>
<div :class="{fontSize:styleflag}">
样式绑定测试
</div>
<p :class="[isFlag?red:blue]">
三元运算符切换样式
</p>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
imgurl:'img/02.jpg',
title:'测试属性绑定',
flag:true,
style1:'fontSize',
style2:'backColor',
styleflag:true,
isFlag:true,
red:'redcolor',
blue:'bluecolor'
}
});
</script>
</body>
</html>
