Vue.js进阶之路3

Posted 2021-09-08 纸 飞机

一.class(类)的绑定

1.我们为什么要绑定类名?

Vue.js有一个特点就是数据驱动视图那么以此可以形成以数据来控制类名(class),从而改变样式。(可能有点生硬但这样理解也好)

类名和数据的绑定我们使用v-bind(单向数据绑定)

2.类名的绑定方式

A.对象的形式

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

B.数组的形式

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

3.案例

老规矩,先来配置项

new Vue({
    el: '#app',
    data: {
      classFlag: true,
      classFlag1:false,
      // size: 'yanyabing'
      size: 'size',
      bg: 'bg'
    },
    methods: {
      changeClass(){
        this.classFlag = !this.classFlag
      }
    }
  })

再来个css

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

先看看平常类名的写法:

<div class="size"></div>
<div class="size bg"></div>
//一种是单个,一种是多个,那么我们的Vue.js也是可以多个的

再来看看对象形式绑定的写法:

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

在这里可以说是做了个判断,如果classFlag为true那么类名就可以绑上去,如果为false则失败

如果我们改成

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

它的输出是这样的,这就印证了上面的说法,为false就不绑定

最后来看看数组形式的绑定方法

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

非常的简单的输出下面:

这里有个小建议:建议大家加上引号

除了直接写以外,里面还是支持一些表达式的,我们来写个小的综合案例吧(开关切换)

案例要求:

• 点击按钮切换元素的class名

<button @click = "classFlag=!classFlag"> change class </button>
<button @click = "changeClass"> change class </button>
<div :class = "[classFlag?size:bg]"></div> 

两种写法一个方法写在methods里,一个直接在v-on:click里写,div里的数组里用了三目运算,classFlag为true就是size,flase就是bg,click事件改变的classFlag的值,所以达到了切换的目的。

二、style(样式)的绑定

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

先看看样式的几种写法:

A.style双标签嵌入样式(内联)

B.行内样式

C.外部引用

D.@import('./csss/….')

Vue.js是数据控制视图的,实现过程

数据 --控制--样式---》 功能 效果

样式 要和 数据 绑定--》 v-bind(单向绑定)

2.样式的绑定形式

A.对象

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

B.数组

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

三、计算属性(computed)

1.为什么要有计算属性?

a.直接模板语法中直接写逻辑 // 1.html结构不纯粹 2. 写起来不舒服

b.方法运行 // 但是语义性不高

2.计算属性是什么?

a.计算属性是new Vue(options) options中的一个配置项， 用computed表示， 它的值是一个对象

b.计算属性的值中存放的是方法

3.computed 比较methods

同:都是函数， 都可以书写逻辑

异:

a:methods中的方法运行依赖于事件或是方法调用 举例 @click = eventFnName {{ eventFnName() }}

b.computed的方法名可以直接当做变量一样用， 类似于直接在data中定义的数据

4.什么时候使用计算属性呢?

a.项目中有逻辑

b.数据类似变量

5.案例

场景:我又一个字符串"abcdef",我想它反向输出

methods写法:

1.

methods: {
      reverseHandler(){
        return this.msg.split('').reverse().join('')
      }
    }

    <p>
      {{ reverseHandler() }}//语义性不高
    </p>

2.

<p>
   {{ msg.split('').reverse().join('') }}//1.html结构不纯粹 2. 写起来不舒服
</p>

computed写法:

 computed: {
      /* 多个方法 */
      reverseMsg(){
        return this.msg.split('').reverse().join('')
      }

<p>
   {{ reverseMsg }}
 </p>

下面我们要准备做一个TodoList的项目了,在下一篇