Vue2学习笔记:class和style

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

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>

注意：分清楚

:class   这个是class标签  

:style   这个是样式标签

以上是 Vue2学习笔记:class和style 的全部内容， 来源链接： utcz.com/z/376164.html

回到顶部