1. <div>
    2. <h2>动态添加类名</h2>
    3. <!-- 第一种:对象的形式 -->
    4. <!-- 第一个参数:类名,第二个参数:Boolean值 -->
    5. <!-- 对象的形式:用花括号包裹,类名用引号 -->
    6. <!-- 优点:以对象的形式可以写多个,用逗号隔开 -->
    7. <p :class="{'p1':true}">对象的形式</p>
    8. <p :class="{'p1': false, 'p': true }"></p>
    9. <!-- 第二种方式: 三元表达式,放在数组里,类名用引号 -->
    10. <p :class="[ 1 < 2 ? 'p1' : 'p' ]" >三元表示式(文字的颜色)</p>
    11. <!-- 第三种方式: 数组的形式 -->
    12. <p :class="[isTrue, isFalse]">数组的形式(文字的颜色)</p>
    13. <!-- 数组中用对象 -->
    14. <p :class="[{'p1': false}, isFalse]">数组中使用对象(文字的颜色)</p>
    15. <!--补充: class中还可以传方法,在方法中返回类名-->
    16. <p :class="setClass">通过方法设置class类名</p>
    17. </div>
    18. <!-- === 添加样式 === -->
    19. <div id="box">
    20. <!--直接添加样式-->
    21. <p style="background-color: blue;">sssss</p>
    22. <!--绑定样式-->
    23. <p v-bind:style="'background-color: red;'">sssss</p>
    24. <!--将vue中的属性作为样式设置-->
    25. <p :style="obj">sssss</p>
    26. <!--将多个属性作为样式设置-->
    27. <p :style="[obj,obj1]">sssss</p>
    28. </div>
    29. <script type="text/javascript">
    30. var vm=new Vue({
    31. el:"#box",
    32. data:{
    33. obj:{
    34. backgroundColor:"gold"
    35. },
    36. obj1:{
    37. fontSize: "30px"
    38. }
    39. },
    40. });
    41. </script>
    1. export default{
    2. data () {
    3. return {
    4. isTrue: 'p1',
    5. isFalse: 'p'
    6. };
    7. },
    8. method: {
    9. setclass () {
    10. return 'p1';
    11. }
    12. }
    13. }