前端之vue样式

一只爱吃萝卜的小兔子

已于 2022-04-25 14:24:48 修改

阅读量975

点赞数

分类专栏： vue 文章标签： vue.js 前端

于 2022-04-25 14:21:10 首次发布

本文链接：https://blog.csdn.net/weixin_46372074/article/details/124404227

版权

vue 专栏收录该内容

51 篇文章 3 订阅

订阅专栏

vue样式

绑定样式
内联style动态绑定样式 -- 用对象

绑定样式

在这里插入图片描述

不要自己动用DOM，使用Vue的属性 :class
所以不改变的样式正常写，改变的样式用:class指定一个data变量

class = “” //这是正常使用
:class="表达式" // 会解析该表达式

单个类样式的动态使用 – 字符串写法

用于要绑定的类的名字不确定

  <style>
    /* 类样式 */
    .basic {
      height: 200px;
      width: 600px;
    }

    .happy {
      border: blue solid 2px;
      background-color: red;
    }

    .sad {
      border: yellow solid 2px;
      background-color: greenyellow;
    }

    .normal {
      border: black solid 2px;
      background-color: blue;
    }
  </style>


<body>
  <!-- 容器 -->
  <div id="root">
    <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
  </div>

  <script>
    Vue.config.productionTip = false; // 阻止 Vue 在启动时生成的生产提示
    new Vue({
      el: '#root',
      data() {
        return {
          name: '类样式实例',
          mood: 'normal',
        }
      },

      methods: {
        changeMood() {
          const arr = ['sad', 'normal', 'happy'];
          this.mood = arr[Math.floor(Math.random() * 3)];
        }
      }
    })
  </script>
</body>

多个类样式的动态使用 – 数组写法

用于要绑定的类的名字和个数都不确定

    <div class="basic" :class="fontArr">{{name}}</div>

      data() {
        return {
          name: '类样式实例',
          mood: 'normal',
          fontArr: ['font1', 'font2', 'font3']
        }

补充对数组的操作:

	删除	添加
列表头	shift	ushift
列表尾	push	pop

对象写法

用于要绑定的类的名字和个数都确定，但是要动态的选择要不要用

    <div class="basic" :class="fontObj">{{name}}</div>

      data() {
        return {
          name: '类样式实例',
          fontObj: {
            font1: true,
            font2: true,
            font3: true
          }
        }
      }

内联style动态绑定样式 – 用对象

<div class="basic" :style="styleObj">{{name}}</div>
 <div class="basic" :style="styleArr">{{name}}</div>

styleObj对象内的属性是已有的样式属性用小驼峰命名格式写的
styleArr数组内是有多个styleObj组成。

在这里插入图片描述

eg:

<body>
  <!-- 容器 -->
  <div id="root">
    <div class="basic" :style="styleObj">{{name}}</div>
    <div class="basic" :style="styleArr">{{name}}</div>
  </div>

  <script>
    Vue.config.productionTip = false; // 阻止 Vue 在启动时生成的生产提示
    new Vue({
      el: '#root',
      data() {
        return {
          name: '类样式实例',
          styleObj: {
            fontSize: 50 + 'px',
            backgroundColor: 'red',
            color: 'blue'
          },
          styleArr: [{
              fontSize: 50 + 'px',
            },
            {
              backgroundColor: 'red',
            },
            {
              color: 'blue'
            }
          ]
        }
      },
    })
  </script>
</body>

下一节：前端之vue条件渲染、列表渲染

一只爱吃萝卜的小兔子

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端之vue样式

vue样式绑定样式单个类样式的动态使用 -- 字符串写法多个类样式的动态使用 -- 数组写法对象写法内联style动态绑定样式 -- 用对象绑定样式不要自己动用DOM，使用Vue的属性 :class所以不改变的样式正常写，改变的样式用:class指定一个data变量class = “” //这是正常使用:class="表达式" // 会解析该表达式单个类样式的动态使用 – 字符串写法用于要绑定的类的名字不确定 <style> /* 类样式 */ .basic
复制链接

扫一扫