vue—小案例— # 登录账号切换 # 点击列表变颜色 # 购物车表格

最新推荐文章于 2022-12-28 16:17:43 发布

fuzuxian

最新推荐文章于 2022-12-28 16:17:43 发布

阅读量421

点赞数 2

分类专栏： vue 文章标签： vue 前端 v-if

本文链接：https://blog.csdn.net/image_fzx/article/details/103824313

版权

vue 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

1，登录账号切换

登录账号切换——javascript

<div id="app">
  <!--  v-if="isUsername"    写等号 #   加引号 !!!-->
  <span  v-if="isUsername">
    <label for="username">用户账号</label>
    <input id="textName"   type="text"  placeholder="用户账号"   key="用户账号" />
  </span>

  <span  v-else>
    <label for="email">用户邮箱</label>
    <!--//加上 key 就不会发生input复用问题-->
    <input id="textName2"   type="text"   placeholder="用户邮箱"    key="用户邮箱"/>
  </span>
  <button  @click="isUsername = !isUsername">更换账号类型</button>
</div>

当input 没有加上key 时会发生复用问题，即更换账号类型后原先输入的内容依然在input框中，原因：

vue进行DOM渲染时，出于性能的考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。

2，点击列表变颜色

在这里插入图片描述
重点代码：引进一个变量 CurrentIndex

:class="{active: CurrentIndex === index}"
this.CurrentIndex = index

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active{color: deeppink }
  </style>
</head>
<body>
<div id="app">
  <ul>
    <li :class="{active: CurrentIndex === index}"  @click="btnClick(index)"  v-for="(m, index) in  movies" > {{index}}--{{m}} </li>
  </ul>
</div>
<script src="vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      CurrentIndex:0,
      movies: ['庆余年' , '陈情令', '间客', '将夜']
    },
    methods:{
      btnClick: function (index) {
        this.CurrentIndex = index;
      }
    }
  })
</script>
</body>
</html>

3，购物车表格

购物车表格—javascript
购物车表格 html 代码：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>图书购物表格—Cookie_fzx</title>
  <link rel="stylesheet"  href="book.css">
</head>
<body>

<div id="app">
  <!--如果全部删除则不显示表格，故添加v-if="books.length"-->
  <div  v-if="books.length">
    <table>
      <thead>
      <tr>
        <th>ID</th>
        <th>书籍名称</th>
        <th>出版日期</th>
        <th>价格</th>
        <th>购买数量</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr  v-for="(item,index) in books">
        <!--<td v-for="value in item">{{value}}</td>-->
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.date}}</td>
        <td>{{ item.price | showPrice }} </td>
        <td>
          <!--v-bind 动态绑定 disabled  如果小于1，则不能点击-->
          <button  :disabled="item.count <= 1"   @click="subbook(index)">-</button>
          {{item.count}}
          <button  @click="addbook(index)">+</button>
        </td>
        <td><button @click="removebook(index)">移除</button></td>
      </tr>
      </tbody>
    </table>
    <h3>总价为：{{getTotalPrice | showPrice  }}</h3>
  </div>
  <h2 v-else>图书购物车空空如也~</h2>
</div>

<script src="vue.js"></script>
<script src="book.js"></script>

</body>
</html>

购物车表格 book.js 代码：

const app = new Vue({
  el: '#app',
  data: {
    books:[
      {
        id:1,
        name:'将夜',
        date:'2018-01',
        price:85.00,
        count:1
      },
      {
        id:2,
        name:'庆余年',
        date:'2019-01',
        price:40.00,
        count:1
      },
      {
        id:3,
        name:'间客',
        date:'2020-01',
        price:60.00,
        count:1
      },
      {
        id:4,
        name:'猫腻三部曲',
        date:'2019-09',
        price:100.00,
        count:1
      }
    ]
  },
  methods:{
    removebook: function(index) {
      this.books.splice(index,1)
    },
    addbook(index) {
      this.books[index].count++
    },
    subbook(index) {
      this.books[index].count--
    }
  },
  computed:{    //  computed  ！！！ 计算属性 ，有缓存，调用一次
    getTotalPrice(){
      return this.books.reduce(function (preValue, nextBook) {   // reduce 函数：数组的每个数依次相加求总和
        return preValue + nextBook.count * nextBook.price;
      },0)
    }
  },
  filters:{    //  filters  ！！！过滤器   用法：    {{ 数据参数 | 过滤函数}}
    showPrice(price){
      return '￥' + price.toFixed(2);    // toFixed(2)保留两位小数
    }
  }
})

购物车表格 book.css 代码：

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;
}