vue绑定内联样式和绑定class名

一.vue绑定内联样式:

字符串/对象/数组

1.字符串的方式:

       <p :style="`background:url(${imgUrl}) no-repeat center`">

2.对象的方式:

       <p :style="{background:'url('+ imgUrl +') no-repeat center'}"></p>

3.数组的方式:

       <p :style="[bgImgUrl,bgSize]">

 data () {

                return {

                    bgSize:{

                        backgroundSize:"cover"

                    },

                    bgImgUrl:{

                        background:'url(./logo.png ) no-repeat center'

                    },}

二.绑定class名称:

字符串/对象/数组

1.三元运算符

     <ul>

           <li v-for="item in list" :class=" item.age >= 40 ? 'red' : '' ">

               {{ item.name }} {{ item.age }}

            </li>

        </ul>

2.对象

     <ul>

            <!-- 对象绑定class名称 key就是需要绑定的class名称 什么时候绑定class名称 根据value值的结果 -->

           <li v-for="item in list" :class="{ red : item.age >= 40 , font : classname }">

               {{ item.name }} {{ item.age }}

            </li>

        </ul>

3.数组

  <ul>

           

           <li v-for="item in list" :class="[{ red : item.age >= 40 }]">

               {{ item.name }} {{ item.age }}

            </li>

        </ul>

        <ul>

            <li v-for="item in list" :class="[item.age >= 40 ? 'red' : '']">

                {{ item.name }} {{ item.age }}

             </li>

         </ul>