vue中style绑定样式方法记录

STRAT

• 记录一下vue中常用的样式绑定的用法
• 记录一下callBack函数的使用（蛮不错了，理解清楚之后很多场景会使用到。）

代码

<template>
  <div id="app">
    <h3>vue中绑定style用法案例</h3>

    <!-- 1. 最基本的使用 -->
    <h3 :style="{ color: colorList[0] }">1.基本的绑定样式示例</h3>
    <br />

    <!-- 2. 进阶使用 -->
    <div
      :style="
        'background-image: url(' + imageUrl + ');height:400px;width:400px'
      "
    ></div>

    <br />
    <!-- 3. 引用外部文件的配置修改样式 -->
    <div>
      <h3>3.引用外部文件的配置修改样式</h3>
      <div v-for="item in 4" :key="item">
        <div :style="findItem(item, colorList)">第 {{ item }} 行数据</div>
      </div>

      <pre>
         第三个使用方式我这里说明一下：
         1. 我希望页面A样式是 由传入的外部代码B逻辑控制的，（这里为了方便演示，代码B放在了A文件中） 
         2. 但是这个外部代码逻辑B呢，又依赖页面A渲染时候的具体数据做逻辑判断。所以代码B中会存在页面A的变量
         
         3. 难点就在于`代码B中会存在页面A的变量`,
            + 方案一：直接传递字符串给页面A,字符串中写页面A的变量 ===> vue中用v-bind方法没有效果，无法正确解析  （pass）
            + 方案二：直接传递一个匿名函数给页面A,匿名函数接收一个形参，根据传入参数做逻辑处理（可行）

      </pre>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      colorList: ["pink", "yellow", "#409EFF", "green"],
      imageUrl:
        "https://upload.jianshu.io/users/upload_avatars/13278218/60803b63-0f9d-490e-9c41-1511c56025d4?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120",

      findItem: (item, colorList) => {
        if (item && item === 2) {
          return { color: colorList[item] };
        }
      },
    };
  },
};
</script>

<style>
</style>

效果图

END

• 后期要是再用到将函数以参数形式传入，再做整理，蛮好用的，加油