vue: 动态添加样式

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

v2-641a0ecdce443eb088e57aade4e7558e_b.jpg

------------------------ 动态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类

v2-0d42798874f99f6537dcd79c51bac955_b.jpg

有多个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"
    },
})
      

v2-b068f860df6d815b44a7dfcc5c6d4c33_b.jpg


--------------------------动态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"
     },
})

      

v2-17a1bbb5a1f4f56350ab92f8aa187b95_b.jpg

双向数据绑定,改变color值

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

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

v2-c91e36971b455ac7bc5922df6b54e1f4_b.jpg

多个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,
     },
 })
      

v2-455b3de2733625b0f57c28cc8ec19a24_b.jpg

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

解决方式: 使用计算属性

        <!-- 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'
            }
       }
    }
})
      

v2-2c85687864045f3df4ed20e0ba179822_b.jpg

混合多个样式

        <!-- 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,
},
      

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值