vue教程1-06 v-bind属性、class和style
vue教程1-06 属性、class和style
一、属性
属性: v-bind:src="" width/height/title.... 简写: :src="" 推荐 <img src="{{url}}" alt=""> 效果能出来，但是会报一个404错误 <img v-bind:src="url" alt=""> 效果可以出来，不会发404请求
window.onload=function(){ new Vue({ el:'#box', data:{ url:'https://www.baidu.com/img/bd_logo1.png', w:'200px', t:'这是一张美丽的图片' }, methods:{ } }); }; <div id="box"> <!--<img src="{{url}}" alt="">--> <img :src="url" alt="" :width="w" :title="t"> </div>
二、class和style
:class="" v-bind:class=""
:style="" v-bind:style=""
:class="[red]" red是数据
:class="[red,b,c,d]"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
claOne:'red',//这里的red是样式class类名
claTwo:'blue'
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<!--这里的calOne,calTwo指data里的数据-->
<strong :class="[claOne,claTwo]">文字...</strong>
</div>
</body>
</html>
:class="{red:true, blue:false}"//这里是{ json}
<style> .red{ color: red; } .blue{ background: blue; } </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ }, methods:{ } }); }; </script> <div id="box"> <strong :class="{red:true,blue:true}">文字...</strong> </div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
a:true,
b:false
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :class="{red:a,blue:b}">文字...</strong>
</div>
</body>
</html>
data:{
json:{red:a, blue:false}
}
:class="json"
//官方推荐用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
json:{
red:true,
blue:true
}
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :class="json">文字...</strong>
</div>
</body>
</html>
--------------------------
style:
:style="[c]"
.red{
color: red;
}
<div id="box">
<strong :style="{color:'red'}">文字...</strong>
</div>
:style="[c,d]"
注意: 复合样式，采用驼峰命名法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style></style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
c:{color:'red'},//这里的red是 class .red
b:{backgroundColor:'blue'}//注意: 复合样式，采用驼峰命名法
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :style="[c,b]">文字...</strong>
</div>
</body>
</html>
:style="json"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style></style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
a:{
color:'red',
backgroundColor:'gray'
}
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :style="a">文字...</strong>
</div>
</body>
</html>
