App.vue

<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <!-- <h1>{{ msg }}</h1>
    <p>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/contact">Contact</router-link>
    </p> -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      msg: "欢迎光临",
    };
  },
};
</script>

<style>
@import "./common/css/global.css";
</style>

一些行内样式的写法：

//1
<div class="item-title-title" :style="'color:' + item.vipNameColor">

<el-col :span="12" :style="{ height: '350px' }">

//2
 <div
  @click="selectedVip(i)"
  :class="['vipCard', selectedId === i.id ? 'vipCardsBg' : '']"
  v-for="(i, k) in vipArr" :key="k"
 >

//修改会员卡片的选中样式
    selectedVip(item) {
      this.selectedId = item.id;
    },

第一种方法：内联样式style（行内样式）的动态渲染

<div id="app">
        <!-- 内联样式style（行内样式）的动态渲染 -->
        <h1 :style="{color,fontSize}">兄弟们，我凉凉了</h1>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                color:"red",
                fontSize:"50px"
            }

            methods: {
                
            }
        })
    </script>

如代码所示，在data 数据中心 写上样式，在视图层使用 v-bind: 指令(简写为 ：)以数组的形式写在指令中，并在页面渲染

输出结果为：

2.多个内联样式，在数据中心data里，将其罗列在对象中。然后将这个对象，渲染到视图层

 
    <div id="app">
        <!-- 多个内联样式，在数据中心data里，将罗列在对象中。然后将这个对象，渲染到视图层 -->
        <h1 :style="styleObject">我凉凉了老铁们</h1>
    </div>

   <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                styleObject:{
                    color:"blue",
                    fontSize:"40px",
                    textDecoration:"underline"
                }
            },
            methods: {
                
            }
        })
    </script>

如代码所示，我们在 data 数据中心中 以数组的形式 罗列出要写的样式，并在视图层 用

v-bind: 直接输出 data 数据中心 所写的 对象名

输出结果：

3.多个内联样式，我们在动态渲染的时候， 可以将其放在视图层的数组中[]

 注意：你放在数组中的这些内容，在数据中心data中一定要是一个对象

我们可以在数据中心 data 中，定义两个或多个对象用来存放样式

 <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                styleObj:{color:'blue',fontSize:'20px'},
                styObj1:{backgroundColor:"green"}
            },
            methods:{}
        })
    </script>

在视图层引入样式，可以引入多个，但一定要放入 [] 中

   <!-- 可以引入一个样式，也可以多个 -->
        <h1 :style="[styleObj,styObj1]">我是一个成熟的h1</h1>
        <!-- 样式不会被重叠，但是一定要放在数组中 -->

输出结果为：