Vue.js绑定内联样式

 

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>

效果图：

 

posted @ 2018-09-13 20:54  Strive-count  阅读(240)  评论(0)  编辑  收藏  举报