Vue.js知识—— v-if && v-else、v-show、v-for、购物车案例-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaotangyu7dong/article/details/119924659

Vue.js知识

v-if && v-else
- 用户登录切换的案例
v-show
v-for
- 数组中哪些方法是响应式的
购物车案例

v-if && v-else

<body>
  <div id="app">
    <h2 v-if="isShow">{{message}}</h2>
    <h2 v-else>如果信息为false，就显示我</h2>
  </div>
  <script src="../vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"hello Vue",
        isShow:"ture"
      }
    })
  </script>

在这里插入图片描述

用户登录切换的案例

<body>
  <div id="app">
    <span v-if="isUser">
      <label for="username">帐号登录</label>
      <input type="text" id="username" placeholder="用户帐号">
    </span>
    <span v-else>
      <label for="email">邮箱登录</label>
      <input type="text" id="email" placeholder="用户邮箱">
    </span>
    <button @click="isUser = !isUser">切换登录方式</button>
  </div>
  <script src="../vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"如果信息为true，就显示我",
        isShow:"true",
        isUser:"true"
      }
    })
  </script>
</body>

但是这种方法有小问题，如果在有输入内容的情况下，切换了类型，就会发现文字依然显示之前的输入的内容。
按道理来说，切换到另一input元素中，在另一个input中应该会被清空。

解答：这是因为Vue进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素，所以在上面案例，Vue内部方向原来的input元素不再使用，直接作为else中的input使用了。

解决方法：
如果不希望这种情况出现，可以给对应的input元素添加key，并且需要保证key不同

    <span v-if="isUser">
      <label for="username">帐号登录</label>
      <input type="text" id="username" placeholder="用户帐号" key="username">
    </span>
    <span v-else>
      <label for="email">邮箱登录</label>
      <input type="text" id="email" placeholder="用户邮箱" key="email">
    </span>

v-show

可以控制页面中的元素是否显示
<h2 v-show="isShow">显示h2</h2>

与上述的v-if，不同的是
v-if：当条件为false时，包含v-if指令的元素，根本不会存在dom中，直接删除
v-show:当条件为false时，v-show只是给元素一个行内样式，display:none;

开发中如何选择？
当需要在显示与隐藏之间频繁切换时，选择v-show
如果只有一次切换时，通过使用v-if

v-for

在遍历对象的过程，如果只是获取一个值，那么获取的是value
<ul><li v-for="value in info">{{value}}</li></ul>
如果想获取两个值
<ul><li v-for="(key,value) in info">{{value}}:{{key}}</li></ul>
第一个值为value,第二值为key

官方推荐在使用v-for的时候，给对应的元素或者组件添加一个key属性

数组中哪些方法是响应式的

<body>
  <div id="app">
    <ul><li v-for="item in info">{{item}}</li></ul>
    <button @click="add">添加元素</button>
  </div>
  <script src="../vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"如果信息为true，就显示我",
        isShow:"true",
        isUser:"true",
        info:["a","b","c","d"]
      },
      methods:{
        add(){
          //1.push()
          //this.info.push("aaa");
		
		  //2.通过索引值
		  //this.letters[0] = "aaaa";
        }
      }
    })
  </script>
</body>

1、push 方法是响应式的

2、通过索引值修改，不是响应式
this.info[0] = "aaaa";
在这里插入图片描述

在这里插入图片描述
3、pop(将数组最后的元素删除)，shift(将数组第一个的元素删除)，是响应式的

4、unshift(将元素添加到数组的最前面，可添加多个值)，也是响应式的

5、splice(): 注意这种方法会改变原始数组。
删除元素：第一个参数是开始删除的位置，第二参数是删除多少个元素。如果仅删除一个元素，则返回一个元素的数组。如果未删除任何元素，则返回空数组。
插入元素：第一个参数是开始插入的位置，第二个参数是0，后面参数是插入的元素。
替换元素：第一个参数是开始添加的位置，第二个参数是要替换多少个元素，后面参数是替换的元素。

购物车案例

<!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="../vue.js"></script>
  <style>
    table {
      border: 1px solid #e9e9e9;
      border-collapse: collapse;
      border-spacing: 0;
    }

    th,
    td {
      padding: 8px 16px;
      border: 1px solid #e9e9e9;
      text-align: left;
    }

    th {
      background-color: #f7f7f7;
      color: #5c6b77;
      font-weight: 600;
    }
  </style>
</head>

<body>
  <div id="app">
    <table>
      <thead>
        <tr>
          <th></th>
          <th>书籍名称</th>
          <th>出版日期</th>
          <th>价格</th>
          <th>购买数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in books">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.date}}</td>
          <td>{{getFinalPrice(item.price)}}</td>
          <td>
            <button @click="increment(index)">-</button>
            {{item.count}}
            <button @click="decrement(index)">+</button>
          </td>
          <td><button @click="removeHanle(index)">移除</button></td>
        </tr>
      </tbody>
    </table>
    <h2>总价格:{{totalprice}}</h2>
  </div>
  <script>
    
    const app = new Vue({
      el: "#app",
      data: {
        books: [
          {
            id: 1,
            name: "《算法导论》",
            date: "2006-9",
            price: 85.00,
            count: 1
          },
          {
            id: 2,
            name: "《编程艺术》",
            date: "2008-10",
            price: 59.00,
            count: 1,
          },
          {
            id: 3,
            name: "《编程珠玑》",
            date: "2010-5",
            price: 128.00,
            count: 1,
          },
          {
            id: 4,
            name: "《代码大全》",
            date: "2016-6",
            price: 95.00,
            count: 1,
          }
        ],
        isShow:"true"
      },
      methods: {
        getFinalPrice(price) {
          return "￥" + price.toFixed(2)
        },
        increment(index) {
          if (!this.books[index].count) {
            this.books[index].count = 0;
          } else {
            this.books[index].count--;
          }

        },
        decrement(index) {
          this.books[index].count++;
        },
        removeHanle(index){
          this.books.splice(index,1);
        }
      },
      computed:{
        totalprice(){
          let result = 0;
          for(let i = 0;i<this.books.length;i++){
            result += (this.books[i].price)* (this.books[i].count);
          }
          return this.getFinalPrice(result);
        }
      }
    })

  </script>
</body>

</html>

在这里插入图片描述