mpvue下不同标签页样式的改变

首先请通读官方文档
vue官方文档：Class 与 Style 绑定
mpvue官网手册：class-style部分

mpvue不支持 vue官方文档：Class 与 Style 绑定 中的 classObject 和 styleObject 语法。
此外还可以用 computed 方法生成 class 或者 style 字符串，插入到页面中

style的使用

1. 方法一

<li :style="pageName === 'Buddies' ? 'color:#fff;background-color:#0576ff' : ''">
</li>

2. 方法二

<li :style="styleSelect">
</li>

  computed: {
    styleSelect() {
      return this.pageName === 'Buddies' ? 'color:#fff;background-color:#0576ff' : '';
    }
  },

尝试

1. 尝试在computed中使用闭包

      <li :style="styleSelect(pageName,'Buddies')">Buddies</li>
      <li :style="styleSelect(pageName,'BuddyRecall')">BuddyRecall</li>

    styleSelect() {
      return function(pageName, nowName) {
        console.log('pageName:'+pageName)
        console.log('nowName:'+nowName)
        return pageName === nowName ? 'color:#fff;background-color:#0576ff' : '';
      }
    }

结果：
点击第一个li，样式未改变，Console如下：

main.js:124 pageName:Buddies
main.js:125 nowName:Buddies
main.js:124 pageName:Buddies
main.js:125 nowName:BuddyRecall

注意：
一次点击两个computed中的方法都执行了
我以为是闭包的问题（该去学习闭包了cry）

2. 尝试使用methods

      <li :style="styleSelect()">Buddies</li>
      <li :style="styleSelect()">BuddyRecall</li>
  methods: {
    styleSelect() {
      console.log(this.pageName)
      return this.pageName === 'Buddies' ? 'color:#fff;background-color:#0576ff' : '';
    },
  },

结果：
点击第一个li，样式未改变，Console如下：

main.js:124 Buddies
main.js:124 Buddies

注意：
与使用了闭包的computed方法相同
一次点击两个methods中的方法都执行了

3. 尝试computed不使用闭包

      <li :style="styleSelect">Buddies</li>
      <li :style="styleSelect">BuddyRecall</li>
  computed: {
    styleSelect() {
      console.log(this.pageName)
      return this.pageName === 'Buddies' ? 'color:#fff;background-color:#0576ff' : '';
    },
  },

结果：
点击第一个li，样式都改变，Console如下：

main.js:123 Buddies

点击第二个li，样式都未改变，Console如下：

main.js:123 BuddyRecall

注意：
computed中的方法对应执行一次

4. computed 与methods 对比

      <li :style="styleSelect">Buddies</li>
      <li :style="styleSelect1()">BuddyRecall</li>
  computed: {
    styleSelect() {
      console.log('now:' + this.pageName)
      return this.pageName === 'Buddies' ? 'color:#fff;background-color:#0576ff' : 'color:#0576ff;background-color:#fff';
    }
  },
  methods: {
    styleSelect1() {
      console.log('Now:' + this.pageName)
      return this.pageName === 'BuddyRecall' ? 'color:#fff;background-color:#0576ff' : 'color:#0576ff;background-color:#fff';
    }
  },

结果：
点击第一个li，样式改变，Console如下：

main.js:123 now:Buddies
main.js:132 Now:Buddies

点击第二个li，样式未改变，Console如下：

now:BuddyRecall
main.js:132 Now:BuddyRecall

注意：
每次点击computed以及methods中的方法都分别执行了，它们依赖的pageName变量每次点击都改变了

分析

• 2和3可以得出 ：
  mpvue可以用 computed 方法生成 style 字符串，插入到页面中，但不支持 methods
• 1和2得出：
  “两个标签style中调用同一个methods的方法执行两次问题
  因为在style里调用所以页面渲染就会调用（卒），而我在点击事件中描写的方法会使页面重新渲染
• computed中使用闭包与methods效果相同，像示例这种每个标签都使其依赖的变量发生改变，而造成重新渲染，失去了computed的特性，因此不建议使用计算属性传参
• 3得出
  同一个computed中的方法（非闭包）在两个style中对应执行一次问题，
  这是因为
  1.计算属性是基于它们的响应式依赖进行缓存的
  2.每当触发重新渲染时，调用方法将总会再次执行函数，详情请看Vue官方文档计算属性缓存vs方法

使用style解决

针对每个标签写对应的style或者style+computed方法，可以看出这种方法使得代码太冗余了

<li :style="pageName === 'Buddies' ? 'color:#fff;background-color:#0576ff' : ''"></li>
<li :style="pageName === 'Buddies' ? 'color:#fff;background-color:#0576ff' : ''"></li>

      <li :style="styleSelect">Buddies</li>
      <li :style="styleSelect1()">BuddyRecall</li>
  computed: {
    styleSelect1() {
      return this.pageName === 'Buddies' ? 'color:#fff;background-color:#0576ff' : '';
    },
    styleSelect2() {
      return this.pageName === 'BuddyRecall' ? 'color:#fff;background-color:#0576ff' : '';
    }
  },

使用Class解决

方法之类的使用与style相同，少写了具体的样式属性（推荐）

   <ul id="top-ul">
      <li :class="pageName === 'Buddies' ? 'activeLi' : ''" >Buddies</li>
      <li :class="pageName === 'BuddyRecall' ? 'activeLi' : ''" >BuddyRecall</li>
    </ul>
.activeLi {
  color: #fff;
  background-color: #0576ff;
} 

问题：
若#top-ul>li中有要修改的属性，则activeLi的优先级较低不生效

#top-ul>li{
color: #0576ff;
}

解决：

1. 将冲突的属性挪到父元素内

#top-ul{
color: #0576ff;
}

2. 添加冲突的属性至另一个类中（推荐）s

<li :class="pageName === 'BuddyRecall' ? 'activeLi' : 'unActiveLi'" >BuddyRecall</li>
.unActiveLi {
  color: #0576ff;
}