• 【Vue】07 绑定样式 条件渲染


    1.11. 绑定样式

    class样式
    ● 写法::class="xxx",xxx 可以是字符串、数组、对象。
    ● :style="[a,b]"其中a、b是样式对象。
    ● :style="{fontSize: xxx}"其中 xxx 是动态值。
    ○ 字符串写法适用于:类名不确定,要动态获取。
    ○ 数组写法适用于:要绑定多个样式,个数不确定,名字也不确定。
    ○ 对象写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。

    1. <style>
    2. .basic {width: 300px;height: 50px;border: 1px solid black;}
    3. .happy {border: 3px solid red;background-color: rgba(255, 255, 0, 0.644);
    4. background: linear-gradient(30deg, yellow, pink, orange, yellow);}
    5. .sad {border: 4px dashed rgb(2, 197, 2);background-color: skyblue;}
    6. .normal {background-color: #bfa;}
    7. .atguigu1 {background-color: yellowgreen;}
    8. .atguigu2 {font-size: 20px;text-shadow: 2px 2px 10px red;}
    9. .atguigu3 {border-radius: 20px;}
    10. </style>
    11. <div id="root">
    12. <!-- 绑定class样式--字符串写法,适用于:样式的类名不确定,需要动态指定 -->
    13. <div class="basic" :class="mood" @click="changeMood">{{name}}</div><br/><br/>
    14. <!-- 绑定class样式--数组写法,适用于:要绑定的样式个数不确定、名字也不确定 -->
    15. <div class="basic" :class="classArr">{{name}}</div><br/><br/>
    16. <!-- 绑定class样式--对象写法,适用于:要绑定的样式个数确定、名字也确定,但要动态决定用不用 -->
    17. <div class="basic" :class="classObj">{{name}}</div><br/><br/>
    18. <!-- 绑定style样式--对象写法 -->
    19. <div class="basic" :style="styleObj">{{name}}</div><br/><br/>
    20. <!-- 绑定style样式--数组写法 -->
    21. <div class="basic" :style="styleArr">{{name}}</div>
    22. </div>
    23. <script type="text/javascript">
    24. Vue.config.productionTip = false
    25. const vm = new Vue({
    26. el: '#root',
    27. data: {
    28. name: '尚硅谷',
    29. mood: 'normal',
    30. classArr: ['atguigu1', 'atguigu2', 'atguigu3'],
    31. classObj: {
    32. atguigu1: false,
    33. atguigu2: false,
    34. },
    35. styleObj: {
    36. fontSize: '40px',
    37. color: 'red',
    38. },
    39. styleObj2: {
    40. backgroundColor: 'orange'
    41. },
    42. styleArr: [
    43. {
    44. fontSize: '40px',
    45. color: 'blue',
    46. },
    47. {
    48. backgroundColor: 'gray'
    49. }
    50. ]
    51. },
    52. methods: {
    53. changeMood() {
    54. const arr = ['happy', 'sad', 'normal']
    55. const index = Math.floor(Math.random() * 3)
    56. this.mood = arr[index]
    57. }
    58. },
    59. })
    60. </script>

    1.12. 条件渲染

    v-if
    ● 写法 跟 if-else 语法类似
            v-if="表达式"
            v-else-if="表达式"
            v-else

    ● 适用于:切换频率较低的场景,因为不展示的DOM元素直接被移除。
    ● 注意:v-if 可以和 v-else-if v-else 一起使用,但要求结构不能被打断
     

    v-show
    ●写法:v-show="表达式"
    ●适用于:切换频率较高的场景
    ●特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉 display: none
    备注:使用 v-if 的时,元素可能无法获取到,而使用 v-show 一定可以获取到
    template 标签不影响结构,页面 html 中不会有此标签,但只能配合 v-if,不能配合 v-show

    1. <title>条件渲染</title>
    2. <script type="text/javascript" src="../js/vue.js"></script>
    3. <div id="root">
    4. <h2>当前的n值是:{{ n }}</h2>
    5. <button @click="n++">点我n+1</button>
    6. <!-- 使用v-show做条件渲染 -->
    7. <!-- <h2 v-show="false">欢迎来到{{name}}</h2> -->
    8. <!-- <h2 v-show="1 === 1">欢迎来到{{name}}</h2> -->
    9. <!-- 使用v-if做条件渲染 -->
    10. <!-- <h2 v-if="false">欢迎来到{{name}}</h2> -->
    11. <!-- <h2 v-if="1 === 1">欢迎来到{{name}}</h2> -->
    12. <!-- v-else和v-else-if -->
    13. <!-- <div v-show="n === 1">Angular</div> -->
    14. <!-- <div v-show="n === 2">React</div> -->
    15. <!-- <div v-show="n === 3">Vue</div> -->
    16. <!-- <div v-if="n === 1">Angular</div> -->
    17. <!-- <div v-else-if="n === 2">React</div> -->
    18. <!-- <div v-else-if="n === 3">Vue</div> -->
    19. <!-- <div v-else>哈哈</div> -->
    20. <!-- v-if与template的配合使用 -->
    21. <template v-if="n === 1">
    22. <h3>你好</h3>
    23. <h3>尚硅谷</h3>
    24. <h3>北京</h3>
    25. </template>
    26. </div>
    27. <script type="text/javascript">
    28. Vue.config.productionTip = false
    29. const vm = new Vue({
    30. el:'#root',
    31. data:{
    32. name:'尚硅谷',
    33. n:0
    34. }
    35. })
    36. </script>

  • 相关阅读:
    常用的神经网络控制结构,神经网络控制应用实例
    springboot拦截器配置
    【MAPBOX基础功能】21、mapbox绘制自动旋转的图标
    Hive函数
    Hadoop3教程(十五):MapReduce中的Combiner
    BUUCTF misc 专题(103)[MRCTF2020]Hello_ misc
    Day 47、48 操作系统的运行机制与体系结构
    安全授权:从 RBAC 到 OAuth2 的最佳实践
    rsync远程同步
    创信短信API的无代码开发集成:电商平台、CRM和用户运营
  • 原文地址:https://blog.csdn.net/qq_37308779/article/details/125494066