VUE基础知识05

最新推荐文章于 2024-09-20 11:35:39 发布

「已注销」

最新推荐文章于 2024-09-20 11:35:39 发布

阅读量145

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45799003/article/details/114545483

版权

VUE 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

这篇博客介绍了Vue.js中如何使用`:class`和`:style`进行动态样式绑定。`:class`可以接受字符串、对象或数组，`:style`通常接收一个对象，其中键是样式属性，值是data属性。例子中展示了不同形式的使用方法，包括结合data属性来改变背景颜色和字体大小。这有助于在组件中创建响应式的界面效果。

摘要由CSDN通过智能技术生成

1.class和style
概念：模板界面中（template），某些元素的样式是变化的，class/style用于动态绑定类和样式class/style绑定技术就是专门用来处理动态样式效果。
class样式：:class = 'aaa'，其中aaa是取值，可以是字符串、对象、数组。
style样式：:style = "{backgroundColor:bgcolor,fontSize:fSize}"（这个觉得单词拼错了！），其中bgColor和fSize都是data属性！
默认：<template><div id="app"></div></template>
新建组件：ClassAndStyle.vue，组件是面向全局的。

<template>
  <div id="app">
    <h3></h3>
    <div :class = "oneClass"></div>
    //字符串
    <div :class = "{classOne:true,calssTwo:true}"></div>
    //对象，直接用style中的名字。
    <div :class = "['classOne','classTwo']"></div>
    <div :class = "['oneClass','twoClass']"></div>
    //数组
    <div :style = "{backgroundColor:bgColor，fontSize:fSize }"></div>
    //style
  </div>
</template>

<script>
  export default{
    name:"ClassAndStyle",
    data(){
      return{
        oneClass:'classOne',
        twoClass:'classTwo',
        bgColor: 'red',
        fSize: '30px'
      }
    }
    }
</script>

<style scoped>
  .calssOne{
    font-size: 20px;
    color: red;
  }
  .calssTwo{
    width: 200px;
    height: 200px;
    background-color: deepskyblue;
  }
</style>