Vue学习------用v-bind和 v-for实现点击元素让它变为红色和计算属性的使用

最新推荐文章于 2023-02-15 14:59:22 发布

OrdnAry

最新推荐文章于 2023-02-15 14:59:22 发布

阅读量337

点赞数

分类专栏：学习文章标签： vue

本文链接：https://blog.csdn.net/ordnary/article/details/113769620

版权

学习专栏收录该内容

59 篇文章 5 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<style>
  .color{
    color: red;
  }
</style>
<div id="app">
  <ul>
    <!--<li v-for="m in movies">{{m}}</li>-->
    <li @click="a(index)" :class="{color: jilu == index}" v-for="(m, index) in movies">{{index}}-{{m}}</li>
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      movies: ['全职猎人', '海贼王', '火影忍者', '咒术回战'],
      jilu:0
    },
    methods:{
      a : function(index){
        //console.log(index);
        this.jilu = index;
      }  
    }
  })
</script>

</body>
</html>

在这里插入图片描述

计算属性的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2>总价格: {{totalPrice}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      books: [
        {id: 10, name: 'Linux', price: 129},
        {id: 11, name: '代码大全', price: 105},
        {id: 12, name: '计算机原理', price: 70},
        {id: 13, name: '操作系统', price: 80},
      ]
    },
    computed: {
      totalPrice: function () {
        let result = 0
        // for (let i=0; i < this.books.length; i++) {
        //   result += this.books[i].price
        // }
       

        // for (let i in this.books) {
        //   result += this.books[i].price;
        //   console.log(this.books[i].price);
        // }
        
        for (let book of this.books) {
          result += book.price;
          console.log(book.price);
        }
        return result
      }
    }
  })
</script>

</body>
</html>