Vue学习笔记（一）——插值操作与计算属性

Vue学习笔记（一）——插值操作与计算属性

---

一、插值操作

1.基础的插值操作

核心代码如下：

<div class="title" :class="{active: isActive,line: isLine}">{{message}}</div>
<div class="title" :class="classGet()">{{message}}</div>
<!--  中间省略了不必要的Vue代码 -->
methods: {
          btnClick: function () {
            alert("hello");
            this.isActive = !this.isActive;
          },
          classGet: function () {
            return {active: this.isActive,line: this.isLine}
          }
         }    

2.插值操作的实列

需求：在一个ul列表里面，点击一个li标签使其变成红色。
核心代码：

<ul>
     <li v-for='(items,index) in movies' :class="{active:index == currentIndex}" v-on:click="getClass(index)">{{index}}--{{items}}</li>
</ul>
data:{
            message: '你一定要有信心呀',
            movies:['寻梦环游记','生命之书','珍珠港','泰坦尼克号'],
            currentIndex: 0,
        },
        methods: {
            getClass: function (index) {
                alert(index);
                this.currentIndex = index;
            }
        }

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、计算属性

1.注意事项

计算属性名要用名词
计算属性和函数要比methods里面的函数性能要高

2.计算属性的例子

核心代码：

<h2>{{totalPrice}}</h2>
data: {
      movies: [
        {id: 101, name: '寻梦环游记', price: 30},
        {id: 102, name: '珍珠港', price: 30},
        {id: 103, name: '泰坦尼克号', price: 30},
        {id: 104, name: '冰雪奇缘', price: 30},
      ]
    },
    computed: {
      totalPrice: function () {
        let sum = 0;
        for(let i = 0; i<this.movies.length ; i++){
          sum += this.movies[i].price;
        }
        /*for(let i in this.movies){
          sum += this.movies[i].price;
        }*/
        return sum;
      }
    }