黑马程序员技术交流社区

标题: 【郑州校区】前端笔记Vue项目 第一天 五 [打印本页]

---

作者: 我是楠楠    时间: 2020-3-18 09:31
标题: 【郑州校区】前端笔记Vue项目 第一天 五

【郑州校区】前端笔记Vue项目 第一天 五

绑定style

[AppleScript] 纯文本查看 复制代码

<div v-bind:style="styleObject">绑定样式对象</div>'

  

<!-- CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来)    -->

 <div v-bind:style="{ color: activeColor, fontSize: fontSize,background:'red' }">内联样式</div>

 

<!--组语法可以将多个样式对象应用到同一个元素 -->

<div v-bind:style="[styleObj1, styleObj2]"></div>

 

 

<script>

    new Vue({

      el: '#app',

      data: {

        styleObject: {

          color: 'green',

          fontSize: '30px',

          background:'red'

        }，

        activeColor: 'green',

        fontSize: "30px"

      },

      styleObj1: {

             color: 'red'

       },

       styleObj2: {

            fontSize: '30px'

       }

 

</script>

分支结构v-if 使用场景

• 1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素

• 2- 进行两个视图之间的切换

  
  

[AppleScript] 纯文本查看 复制代码

<div id="app">

        <!--  判断是否加载，如果为真，就加载，否则不加载-->

        <span v-if="flag">

           如果flag为true则显示,false不显示!

        </span>

</div>

 

<script>

    var vm = new Vue({

        el:"#app",

        data:{

            flag:true

        }

    })

</script>

 

----------------------------------------------------------

 

    <div v-if="type === 'A'">

       A

    </div>

  <!-- v-else-if紧跟在v-if或v-else-if之后   表示v-if条件不成立时执行-->

    <div v-else-if="type === 'B'">

       B

    </div>

    <div v-else-if="type === 'C'">

       C

    </div>

  <!-- v-else紧跟在v-if或v-else-if之后-->

    <div v-else>

       Not A/B/C

    </div>

 

<script>

    new Vue({

      el: '#app',

      data: {

        type: 'C'

      }

    })

</script>

v-show 和 v-if的区别


v-show本质就是标签display设置为none，控制隐藏


v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。


v-if是动态的向DOM树内添加或者删除DOM元素


v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2