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>

Vue.js知识—— v-if && v-else、v-show、v-for、购物车案例

v-if && v-else

用户登录切换的案例

v-show

v-for

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

购物车案例

相关文章

热门标签

最新文章

目录