技術標籤：Vue文字編輯器vuevue.js

Vue學習筆記（一）——插值操作與計算屬性

文章目錄

• • Vue學習筆記（一）——插值操作與計算屬性
• 一、插值操作
• • 1.基礎的插值操作
  • 2.插值操作的實列
• 二、計算屬性
• • 1.注意事項
  • 2.計算屬性的例子

一、插值操作

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