Class和Style绑定

最新推荐文章于 2022-09-29 15:05:55 发布

学习笔记666

最新推荐文章于 2022-09-29 15:05:55 发布

阅读量732

点赞数

分类专栏： Vue2学习笔记

本文链接：https://blog.csdn.net/github_26672553/article/details/54630231

版权

Vue2学习笔记专栏收录该内容

23 篇文章 3 订阅

订阅专栏

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>

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

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

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

宽度和高端等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>

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>

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

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

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

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

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>

数组的形式

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

                data:{
                    c:{color:'red'},
                    b:{background:'blue'}
                },

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

学习笔记666

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Class和Style绑定

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
复制链接

扫一扫