1.对象语法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--引入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>无标题文档</title>
</head> <body>
<!--<div id="box" :style="{color:activeColor, font-size:size}">用短横分隔是会报错</div>-->
<div id="box" :style="{color:activeColor, fontSize:size, textShadow:shadow}">没有短横分隔不报错</div> <div id="box2" :style="styleObject">工作睡觉吃饭</div>
</body>
</html>
<script type="text/javascript">
// v-bind:style 的对象语法十分直观--非常像CSS，其实它是一个Javascript对象，CSS属性名必须用驼峰命名法（官方文档写的是既可以用驼峰也可以用 短横分隔命名法），但是用短横分隔是会报错的
var vm= new Vue({
el:'#box',
data:{
activeColor:'#f00',
size:'30px',
shadow:'5px 2px 6px #000'
}
}) var vm= new Vue({
el:'#box2',
data:{
styleObject:{
color:'red',
fontSize:'30px'
}
}
})
</script>
效果图
2.数组语法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--引入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>无标题文档</title>
</head> <body>
<div class="box" :style="[styleObjectA, styleObjectB]">好好学习，天天向上</div>
</body>
</html>
<script type="text/javascript">
// 可将多个样式对象应用到一个元素上
var vm2= new Vue({
el:'.box',
data:{
styleObjectA:{
fontSize:'36px',
color:'blue'
},
styleObjectB:{
textDecoration:'underline'
}
}
})
</script>
效果图：
3.添加图片src地址
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--引入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>无标题文档</title>
</head> <body>
<!--
下面这种写法不会显示图片，会报错，推荐第二种写法
<img class="box" src="{{url}}" >
--> <img class="box" :src="url" >
</body>
</html>
<script type="text/javascript">
var vm= new Vue({
el:'.box',
data:{
url:'https://bbsfiles.vivo.com.cn/vivobbs/attachment/forum/201809/12/005629z489rqqeeyle7gje.jpg.thumb.jpg'
}
})
</script>
效果图：