继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【九月打卡】第6天 Vue3框架

bao_
关注TA
已关注
手记 47
粉丝 9
获赞 42

课程名称:2022持续升级 Vue3 从入门到实战 掌握完整知识体系

课程章节:第2章 Vue 基础语法

主讲老师:Dell

课程内容:

今天学习的内容包括:

  • v-if

  • v-show

  • v-if和v-show的区别

  • v-else-if

  • v-else

  • 编程练习

课程收获:

v-if用于判断内容的显示或隐藏

v-if的值为true的时候

http://img4.sycdn.imooc.com/631c061e0001359405970313.jpg

http://img3.sycdn.imooc.com/631c063400016d5112200312.jpg

v-if的值为false的时候,会移除Dom节点

http://img1.sycdn.imooc.com/631c060f00015e0505760308.jpg

http://img2.sycdn.imooc.com/631c05cf0001864d12020345.jpg

v-show用于控制内容的显示或隐藏

v-show的值为true的时候显示内容.

http://img3.sycdn.imooc.com/631c071e000138b406900291.jpg

http://img4.sycdn.imooc.com/631c07110001aa4311600261.jpg

v-show的值为false的时候给标签添加display: none;的样式属性

http://img1.sycdn.imooc.com/631c06b50001946807150369.jpg

http://img1.sycdn.imooc.com/631c06a80001ed5d13280339.jpg


总结

v-if:通过控制元素在dom上的存在与否来控制它的展示与隐藏

v-show:通过style样式的display来控制是由展示

如频繁的改变显示与隐藏建议使用v-show,不会频繁销毁dom,性能会更好,不频繁的话都可以


v-if和v-else

如果v-if的值为true.则显示if

http://img4.sycdn.imooc.com/631c08200001421806320343.jpg

http://img2.sycdn.imooc.com/631c084b0001c3d012750318.jpg

如果v-if的值为false.则显示else

http://img3.sycdn.imooc.com/631c088500010bff07020276.jpg

http://img2.sycdn.imooc.com/631c089c0001015a12330453.jpg


注:v-else要与v-if配合使用,中间不能有内容


v-else-if:与v-if和v-else配合使用,三者中间不能有分割

如果v-if值为false,则显示v-else-if的值

http://img3.sycdn.imooc.com/631c098000011c9606640358.jpg

http://img3.sycdn.imooc.com/631c09890001100c12460394.jpg

如果v-if值为false,则显示v-else-if的值也为false,则显示v-else的值

http://img2.sycdn.imooc.com/631c099600012db106430413.jpg

http://img4.sycdn.imooc.com/631c09a40001a7f511970327.jpg


总结:


v-if 通过控制元素在dom上的存在与否来控制展示或者隐藏

v-if=false时,直接移除,如果不涉及多次销毁使用时候无所谓

v-show 通过style的display来控制是否展示,只是隐藏,不会频繁销毁dom

v-if

v-else-if

v-else

三个指令要紧贴一起,中间不能有分割

编程练习

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <script src="https://unpkg.com/vue@next"></script>

</head>

<body>

  <div id="root"></div>

</body>

<script>

  const app = Vue.createApp({

    data() {

      return {

        conditionOne: false,

        conditionTwo: false,

      }

    },

    template: `

      <div v-if="conditionOne">if</div>

      <div v-else-if="conditionTwo">else-if</div>

      <div v-else>else</div>

    `

  });



  const vm = app.mount('#root');

</script>

</html>

今天学习了Vue框架里面使用的模板标签v-if和v-show的区别以及v-if,v-else-if和v-else的使用方法,今天也是收获满满的一天,希望能够每天学习一点点,一直坚持下,加油!     

打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP