Vue基础（四）

最新推荐文章于 2022-12-30 17:18:58 发布

何时能脱坑

最新推荐文章于 2022-12-30 17:18:58 发布

阅读量380

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_59675867/article/details/126128654

版权

本文详细介绍了Vue.js中的条件判断指令v-if、v-else、v-elseif和v-show的用法，包括它们在切换登录场景中的应用。同时，讲解了v-for循环遍历数组和对象的操作，强调了使用key属性对于提高性能的重要性。最后，通过一个简易购物车的综合练习，巩固了所学知识。

摘要由CSDN通过智能技术生成

一、条件判断

1.1 v-if、v-else、v-elseif

一、条件判断

1.1 v-if、v-else、v-elseif

<body>
  <div id="app">
    <h2 v-if="isFlag">isFlag为true显示这个</h2>
    <hr>
    <div v-if="age<18">小于18岁未成年</div>
    <div v-else-if="age<60">大于18岁小于60岁正值壮年</div>
    <div v-else="">大于60岁,暮年</div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        isFlag:true,
        isShow:false,
        age:66
      }
    })
  </script>
</body>

单独使用v-if，变量为布尔值，为true才渲染Dom

v-if、v-else、v-else-if联合使用相当于if、elseif、else，但是在条件比较多的时候建议使用计算属性。

1.2 v-if的案例(切换登录)

<body>
  <div id="app">
    <span v-if="isUser">
      <label for="username">用户账号</label>
      <input type="text" id="username" placeholder="请输入用户名" >
    </span>
    <span v-else="isUser">
        <label for="email">用户邮箱</label>
        <input type="text" id="email" placeholder="请输入用户邮箱" >
    </span>
    <button @click="isUser=!isUser">切换类型</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        isUser:true
      }
    })
  </script>
</body>

1.3 v-show

</head>
<body>
  <div id="app">
    <h2 v-show="isFlag">v-show只是操作元素的style属性display</h2>
    <h2 v-if="isFlag">v-if是新增和删除dom元素</h2>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: