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 >
        <!--<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 >
        <!--这里的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 >
        <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 >
        <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 >
        <strong :class="json">文字...</strong>
    </div>
</body>
</html>

.red{
            color: red;
        }
<div >
        <strong :style="{color:'red'}">文字...</strong>
    </div>

注意: 复合样式，采用驼峰命名法

<!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 >
        <strong :style="[c,b]">文字...</strong>
    </div>
</body>
</html>

<!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 >
        <strong :style="a">文字...</strong>
    </div>
</body>
</html>