vue class和style属性

.classs属性绑定： 多个class 要用数组[]包起来 ：class=’[class1,class2]’,还可以加上对象 ：class=’[{class1:true},class2]’，并且不会对已有的class产生影响

　　<div id="test3">
        <p :class='[class1,class2]' class='a'>vue测试</p>
        <!-- 解析完成后，上面p元素的class为 class='a red width' -->
    </div>

 

行内样式style

正常的写法是这样

 <div id="test">
      <img src="a.jpg" alt="" style="width:200px;border:10px solid #f00">
 </div>

在vue中通过绑定来写行内style要用  对象

   <div id="test">
        <img src="a.jpg" alt="" :style="{width:imgWidth,border:'10px solid #f00'}">
    </div>
    <script>
        const vm = new Vue({
            el:'#test',
            data: {
                imgWidth: '200px',
            }
        })
    </script>

多个style把对象放在数组中

data中的style用对象写

 <div id="test">
        <img src="a.jpg" alt="" :style="[{width:imgWidth},imgStyle]">
    </div>
    <script>
        const vm = new Vue({
            el: '#test',
            data: {
                imgWidth: '200px',
                imgStyle: {
                    border: "10px solid #f00"
                }
            }
        })
    </script>

上面的写法 结果都是一个样