松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › Vue2.x从零开始 › 动态样式绑定

动态样式绑定

迦娜王
2年前Vue2.x从零开始
656 0 0

动态样式绑定

一般来讲样式直接通过class和style属性直接写在元素上了,但是也经常会有动态样式这样的需求。比如我们需要切换字体颜色:

<template>
  <div>
    <p class="font-lg" :class="currentColor">我是文字</p>
    <button @click="changeColor('green-color')">变成绿色</button>
    <button @click="changeColor('red-color')">变成红色</button>
  </div>
</template>

<script>

export default {
    data(){
        return {
            currentColor:'red-color',
        }
    },
    methods:{
        changeColor(colorClass){
            this.currentColor = colorClass
        }
    }
}
</script>

<style>
  .red-color {
    color: red;
  }

  .green-color {
    color:green;
  }

  .font-lg{
    font-size: 40px;
  }
</style>

这时候的代码相比之前稍微复杂一些,其实还是v-bind。如果你想直接绑定style字符串也是可以的

<p :style="'color:red'">我是文字</p>

除了通过字符串的方式进行绑定样式外,vue还支持通过对象的方式绑定,不管是哪种方式绑定,class可以和:class共存,并且vue会自己合并,style也同样如此。对象方式平时我用的比较少。这里不展开了。想要了解的可以去查看官方手册。

0
本文系作者 @迦娜王 原创发布在 松鼠乐园。未经许可,禁止转载。
v-on的使用
上一篇
filters的使用
下一篇
评论 (0)

请登录以参与评论。

现在登录
  • 动态样式绑定
相关文章
router的使用
watch属性的使用
computed属性的使用
vuex的简单使用
松鼠乐园

资源整合,创造价值

小伙伴
墨魇博客 无同创意
目录
重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
Copyright © 2018-2021 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
  • 重大新闻
  • Centos
  • CSS
  • Docker
  • ES5
  • ES6
  • Go
  • Java
  • Javascript
  • Linux
  • Mac
  • MySQL
  • Nginx
  • Redis
  • Springboot
  • Tensorflow
  • Vue
  • Vue2.x从零开始
  • Windows
  • 书籍推荐
  • 人工智能
  • 前端资源
  • 后端资源
  • 壁纸
  • 开源项目
  • 测试
  • 论文
热门搜索
  • jetson nano
  • vue
  • java
  • mysql
  • 人工智能
  • 人脸识别
迦娜王
坚持才有希望
1224 文章
33 评论
233 喜欢
  • 0
  • 0
  • Top