vue class和style属性

最新推荐文章于 2024-09-20 11:35:39 发布

weixin_30675247

最新推荐文章于 2024-09-20 11:35:39 发布

阅读量77

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhangcheng001/p/11470941.html

版权

.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>