vue中的style,class和计算属性computed

class && style

class

1. 为什么要绑定类名？

• 因为vue是 数据–驱动–》视图 数据–控制–》类名 -->样式

2. 类名 要和 数据 绑定 —使用 —》 v-bind，单向绑定
3. 类名的绑定方式有两种，分别 是对象的方式和数组的方式

• A: 对象的形式

<style>
    .size{
        width: 50px;
        height: 50px;
        background: red;
        margin: 10px;
    }
    .bg{
        background: blue;
}
</style>



<script>
  new Vue({
    el: '#app',
    data: {
      classFlag: true,
      // size: 'yanyabing'//注意这个size和类名中size不是同一个东西
      size: 'size',
      bg: 'bg'
    },
    methods: {
      changeClass(){
        this.classFlag = !this.classFlag
      }
    }
  })
</script>

<div :class = "{'size': classFlag,'bg': classFlag}"></div>

注意： 对象中的key用字符表示,对象中的key是不会被解析的，所以为了区分就用引号包起来

• B: 数组的形式

<div :class = "['size','bg']"> </div>
<div :class = "[size,bg]"> </div>
<div :class = "[classFlag?size:bg]"> </div>

<div :class = "[classFlag?size:bg]"> </div>//这里也可以用三元表达式

style

1. 为什么要绑定样式呢？

• A: 样式有几种使用形式

1. style双标签嵌入样式(内联)
2. 行内样式
3. 外部引用
4. @import(’./csss/…’)//虽然现在基本上已经弃用，但是在sass中还是会用到

• 数据 --控制–样式—》 功能 效果
• 样式 要和 数据 绑定–》 v-bind
• 样式的绑定形式
• A: 对象

<script>
    new Vue({
        el: '#app',
        data: {
         styleFlag: true,
        style: {
            width:'50px',height:'50px',background:'blue'
          }
        }
    })
</script>



<div :style = "{width:'50px'}"></div>
<div :style = "style"></div>

第二种将数据放在data中

• B: 数组

<div
    :style = "[{width:'50px',height:'50px',background:'yellow'}]"
></div>
<div
    :style = "[style]"
></div>
<div
    :style = "[styleFlag?style:'']"
></div>

计算属性

1. 为什么要有计算属性？
2. 虽然可以直接模板语法中直接写逻辑，并且也有效 ，但是这样会有几个问题

• 1.html结构不纯粹 2. 写起来不舒服
  也可以使用函数方法运行 // 但是语义性不高

<p>
    {{ msg.split('').reverse().join('') }}//直接写逻辑
</p>
<p>
    {{ reverseHandler() }}//使用函数方法，在methods中写好了逻辑，并return出来
</p>

2. 计算属性是什么？

• 计算属性是new Vue(options) options中的一个配置项， 用computed表示， 它的值是一个对象
• 计算属性的值中存放的是方法

3. computed vs methods

• 同： 都是函数， 都可以书写逻辑
• 异： methods中的方法运行依赖于事件或是方法调用 举例 @click = eventFnName {{ eventFnName() }}
  但是computed的方法名可以直接当做变量一样用， 类似于直接在data中定义的数据

4. 项目中如果发现以下两个特点， 就是用计算属性

• 有逻辑
• 使用类似变量

<div id="app">
    <h3> 计算属性 </h3>
    <p>
        {{ reverseMsg }}
    </p>
</div>

<script>
    new Vue({
        el:'#app',
    computed: {
    /* 多个方法 */
    reverseMsg(){
    return this.msg.split('').reverse().join('')
    }


    })
</script>