vue: 动态添加样式

最新推荐文章于 2023-12-26 11:26:18 发布

星辰大海_enoch

最新推荐文章于 2023-12-26 11:26:18 发布

阅读量4.8k

点赞数

本文链接：https://blog.csdn.net/u012872771/article/details/103666577

版权

vue如何操作html模版，使页面样式发生改变
vue可以是使用两种方法使页面发生改变
1. 动态改变class 使class增加、删除达到页面的改变
2. 动态的操作style内联样式

------------------------ 动态class-----------------------------

显示或者隐藏

需求1. 点击图片使isCircle取反
需要2. 如果isCircle使false，就没有circle这个class

        <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>动态样式添加</title>
    <style>
 .shape{
 height: 100px;
 width: 100px;
 background-color: gray;
 display: inline-block;
 margin: 10px;
        }
 .circle{
 border-radius: 50%;
        }
 .blue{
 background-color: blue;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="shape" @click = "isCircle = !isCircle" :class = "{ circle : isCircle, blue : !isCircle }"></div>
 <!-- 刚才矛盾了，前面的class中circle没取消 -->
        <p>{{ isCircle }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
 new Vue({
            el: "#app",
            data: {
                isCircle: false,
            }
        })
    </script>
</body>
</html>

v-bind:class 和 v-bind:style 由vue经过特殊处理,可以在后面写对象，对象中的键为属性，值为false则隐藏该属性，值为true为显示该属性

:class 可以绑定多个类
问题: 写多了class的html模版会使可读性很差
解决: 我们可以把它定义在js下，但不能定义在data下，因为在data里不能获取data的数据(底层还没有绑定上)，所以我们把它定义在计算属性下

        <div id="app">
    <div class="shape" @click = "isCircle = !isCircle" :class = "divClass"></div>
    <p>{{ isCircle }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 new Vue({
     el: "#app",
     data: {
         isCircle: false,
     },
     computed: {
         divClass: function() {
             return {
                 circle: this.isCircle,
                 blue: !this.isCircle,
             }
          }
      }
})
</script>

当它被点击发生true的东西，计算属性检测到它依赖的东西在发生改变，所有返回一个新的对象。

改变类名

        <!-- css代码 -->
<style>
    .shape{
        height: 100px;
        width: 100px;
        background-color: gray;
        display: inline-block;
        margin: 10px;
    }
    .circle{
        border-radius: 50%;
    }
    .blue{
        background-color: blue;
    }
    .red{
        background-color: red;
    }
</style>





<!-- html代码 -->
<div id="app">
    <div class="shape" @click = "isCircle = !isCircle" :class = "color" ></div>
    <p>{{ isCircle }}</p>
    <input type="text" v-model = "color">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            isCircle: false,
            color: "blue"
            },
        computed: {
        divClass: function() {
            return {
                circle: this.isCircle,
                blue: !this.isCircle,
            }
        }
    }
})
</script>

在div上绑定data的color属性，color属性的值为blue，所有class = blue这个类；

我们添加一个input框，使v-model双向绑定data的color属性，所以当color属性改为red使，div的class也成red类

有多个class类可以写成数组

使用input来改动class类，使用点击来隐藏或显示类

        <!-- html代码 -->
<div class="shape" @click = "isCircle = !isCircle" :class = "[color, {circle : isCircle}]" ></div>

<!-- js代码 -->
new Vue({
    el: "#app",
    data: {
        isCircle: false,
        color: "blue"
    },
})

--------------------------动态style-------------------------

使用v-bind绑定style样式

style样式是对象形式，但不能在属性中包含中划线，我们可以把它写成字符串或者驼峰式

        <!-- 包含在#app div中的html代码 -->
<div class="shape" :style = "{ 'background-color':color }"></div>
<!-- 字符串 -->
<div class="shape" :style = "{ backgroundColor:color }"></div>
<!-- 驼峰式 -->

对象后面绑定的是data里的color的数据

         new Vue({
     el: "#app",
     data: {
         color: "blue"
     },
})

双向数据绑定，改变color值

可以直接在input框中输入想要的值

        <div class="shape" :style = "{ 'background-color':color }"></div>
<input type="text" v-model = 'color'>

多个style属性

        <!-- html代码 -->
<div class="shape" :style = "{ 'background-color':color, width:width + 'px' }"></div>
<input type="text" v-model = 'color'>
<input type="text" v-model = 'width'>

<!-- js代码 -->
 new Vue({
     el: "#app",
     data: {
         isCircle: false,
         color: "blue",
         width: 200,
     },
 })

问题: 有冗余，可读性不高

解决方式: 使用计算属性

        <!-- html代码 -->
<div class="shape" :style = "divStyle"></div>
<input type="text" v-model = 'color'>
<input type="text" v-model = 'width'>

<!-- js代码 -->
new Vue({
    el: "#app",
    data: {
        isCircle: false,
        color: "blue",
        width: 200,
    },
    computed: {
        divStyle: function() {
            return {
                backgroundColor: this.color,
                width: this.width + 'px'
            }
       }
    }
})

混合多个样式

        <!-- html代码 -->
<div class="shape" :style = "[divStyle, {height: height + 'px'}]"></div>
<input type="text" v-model = 'height'>

<!-- js的Vue的#app控制的data代码 -->
data: {
    isCircle: false,
    color: "blue",
    width: 200,
    height: 50,
},

星辰大海_enoch

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
vue: 动态添加样式

vue如何操作html模版，使页面样式发生改变vue可以是使用两种方法使页面发生改变1. 动态改变class 使class增加、删除达到页面的改变2. 动态的操作style内联样式 ------------------------ 动态class----------------------------- ...
复制链接

扫一扫