04.样式绑定

最新推荐文章于 2024-09-05 11:08:38 发布

0o憨胖o0

最新推荐文章于 2024-09-05 11:08:38 发布

阅读量134

点赞数

分类专栏： Vue 文章标签： vue.js css javascript

本文链接：https://blog.csdn.net/xia9527/article/details/108402551

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

三样式绑定

在日常开发中，我们关于应用界面的处理无外乎两个方面：数据和样式。

HTML页面关于样式的设置，我们总所周知就是使用class和style属性来实现动态样式的效果。

（1）class绑定

:class="xxx"（xxx是vm中定义的变量名称（可变数据），如果使用’xxx’表示的是固定值字符串）

xxx的取值范围如下：

表达式是字符串：‘classA’
表达式是对象：{classA:isA,classB:isB}
表达式是数组（不常用）：['classA',变量名称]

（2）style绑定

常用写法:style="{ color: activeColor, fontSize: fontSize + 'px' }，其中activeColor、fontSize 是data属性，如果涉及的样式中含有-使用驼峰命名规则

（3）代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04_class与style绑定</title>
  <style>
    .classA {
      color: red;
    }
    .classB {
      background: blue;
    }
    .classC {
      font-size: 20px;
    }
    .classD {
      font-family: 隶书;
    }
  </style>
</head>
<body>
<div id="app">
  <h2>1. class绑定: :class='xxx'</h2>
  <p :class="'classD'">设置固定的样式</p>
  <p class="classA" :class="myClass">xxx是字符串,myClass是data属性中定义变量,有追加效果</p>
  <p class="classD" :class="{classA: hasClassA, classB: hasClassB}">xxx是对象</p>
  <p :class="['classA', myClass]">xxx是数组</p>

  <h2>2. style绑定</h2>
  <p :style="{color:activeColor, fontSize:fontSize+'px'}">:style="{ color: activeColor, fontSize: fontSize + 'px' }"</p>

  <button @click="update">更新</button>

</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#app',
    data: {
      myClass: 'classB',
      hasClassA: true,
      hasClassB: false,
      activeColor: 'deeppink',
      fontSize: 20
    },

    methods: {
      update () {
        this.myClass = 'classC'
        this.hasClassA = !this.hasClassA
        this.hasClassB = !this.hasClassB
        this.activeColor = 'green'
        this.fontSize = 30
      }
    }
  })
</script>
</body>
</html>

0o憨胖o0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
04.样式绑定

三样式绑定在日常开发中，我们关于应用界面的处理无外乎两个方面：数据和样式。HTML页面关于样式的设置，我们总所周知就是使用class和style属性来实现动态样式的效果。（1）class绑定:class="xxx"（xxx是vm中定义的变量名称（可变数据），如果使用’xxx’表示的是固定值字符串）xxx的取值范围如下：表达式是字符串：‘classA’表达式是对象：{classA:isA,classB:isB}表达式是数组（不常用）：['classA',变量名称]（2）style绑定
复制链接

扫一扫