Vue2学习笔记:class和style

最新推荐文章于 2024-11-02 19:19:35 发布

weixin_30401605

最新推荐文章于 2024-11-02 19:19:35 发布

阅读量72

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zycbloger/p/6425229.html

版权

1.用法

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

    <script type="text/javascript">
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{
                    color:'color',      //值color是定义的样式名
                    background:'background',
                    test:{color:"#666", fontWeight:"bold"}
                },
            });
        }
    </script>
    <style type="text/css">
        .color{color: #000}
        .background{background: #ccc}
    </style>
</head>
<body> 
    <div id="box">
        <!-- v-bind可省略 -->

        <!-- class -->
        <span v-bind:class="color">方式1</span>  等价 <span :class="color">方式1</span>  

        <br>
        <span v-bind:class="[color,background]">方式2</span>
        <span v-bind:class="{color:true}">方式3</span>

        <!-- 样式 -->
        <span v-bind:style="test">方式3</span>
    </div>
</body>
</html>