Vue.js綁定內聯樣式

時間 2019-11-09

原文原文鏈接

1.對象語法javascript

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

效果圖html

2.數組語法vue

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

效果圖：java

3.添加圖片src地址npm

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

效果圖：數組

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。