Class和Style绑定

最新推荐文章于 2025-02-07 17:29:45 发布

转载最新推荐文章于 2025-02-07 17:29:45 发布 · 569 阅读

vue2.0 专栏收录该内容

40 篇文章

订阅专栏

本文详细介绍了Vue.js中属性绑定的基本用法，包括如何使用v-bind进行图片源、宽度、高度等属性的绑定，以及class和style的动态绑定技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue的属性

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://unpkg.com/vue/dist/vue.js"></script>

    <script type="text/javascript">
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{
                    url:'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png',
                },
            });
        }
    </script>
</head>
<body>
    <div id="box">
        <img src="{{url}}">
        <img v-bind:src="url">
    </div>
</body>
</html>
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

src="{{url}}"这种方式图片不能显示
这里写图片描述

这证明：在Vue中，HTML属性有特有的写法。
另外，v-bind:src="url"可以简写成:src="url"。

        <img :src="url" width="100px" height="100px">
 1
 1

宽度和高端等HTML属性是直接可以的，但是还是建议按照Vue的规范。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://unpkg.com/vue/dist/vue.js"></script>

    <script type="text/javascript">
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{
                    url:'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png',
                    w:'200px',
                    t:'图标标题'
                },
            });
        }
    </script>
</head>
<body> 
    <div id="box">
        <img :src="url" :width="w" :title="t">
    </div>
</body>
</html>
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

class和style

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://unpkg.com/vue/dist/vue.js"></script>

    <script type="text/javascript">
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{
                    red:'red', //值red是定义的样式名
                    b:'b',
                },
            });
        }
    </script>
    <style type="text/css">
        .red{color: red}
        .b{background: blue}
    </style>
</head>
<body> 
    <div id="box">
        <span v-bind:class="[red,b]">文字</span>
    </div>
</body>
</html>
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

这是数组的用法：v-bind:class="[red,b]"
绑定的数据是：

                data:{
                    red:'red', //值red是定义的样式名
                    b:'b',
                },
 1
2
3
4
 1
2
3
4

还可以传入一个对象，以动态的切换class。

        <span v-bind:class="{red:true}">文字</span> <!-- 样式生效 --> 
        <span v-bind:class="{red:false}">文字</span> <!-- 样式不生效 --> 
        <span v-bind:class="{red}">文字</span><!-- 默认是true -->
 1
2
3
 1
2
3

style

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://unpkg.com/vue/dist/vue.js"></script>

    <script type="text/javascript">
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{
                    red:'red', //值red是定义的样式名
                },
            });
        }
    </script>
    <style type="text/css">
    </style>
</head>
<body> 
    <div id="box">
        <strong :style="{color:red}">文字文字文字</strong>
    </div>
</body>
</html>
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

数组的形式

        <strong :style="[c,b]">文字文字文字</strong>
 1
 1

                data:{
                    c:{color:'red'},
                    b:{background:'blue'}
                },
 1
2
3
4
 1
2
3
4

类似这些就不多讲了，建议直接看文档：http://cn.vuejs.org/v2/guide/class-and-style.html