vue简单使用三（class样式绑定）

twx95

已于 2024-04-11 16:42:39 修改

阅读量329

点赞数 2

文章标签： css 前端

于 2024-04-11 16:42:01 首次发布

本文链接：https://blog.csdn.net/weixin_41670405/article/details/137643743

版权

对象的形式绑定：

数组的形式绑定：

内联样式Style

对象的形式绑定：

可以看到class中有两个值

数组的形式绑定：

可以看到也有两个值

内联样式Style

style样式设置成功

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>Title</title>
    <style>
        .one{
            background: pink;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div class="vuePro">
          <!-- class属性对象形式属性绑定 -->
          <div :class="{one:isOne,two:isTwo}"></div>

          <!-- class属性数组形式属性绑定 -->
          <span :class='[oneArr,twoArr]'></span>

          <!-- 样式绑定之内联样式Style -->
          <a :style="styles"></a>
    </div>
</body>
<script>
    new Vue({
        el:".vuePro",
        data:{
             isOne:true,
             isTwo:true,
             oneArr:"one",
             twoArr:"two",
            styles:{
                border: '1px solid green',
                width: '200px',
                height: '100px'
            }
        }
    });
</script>
</html>