ホームページ ウェブフロントエンド jsチュートリアル vue2.0の計算はリストループの累積値を計算します

vue2.0の計算はリストループの累積値を計算します

Mar 28, 2018 pm 03:14 PM
computed list

今回はリストループの累積値を計算するためのvue2.0の計算値をお届けします。 リストループの累積値を計算するためのvue2.0の注意事項は次のとおりです。ケース、見てみましょう。

例は次のとおりです:

<template>
 <p class="hello">
  <h1>{{ msg }}</h1>
  <h2>Foo</h2>
  <p v-for ="(item, index) in list">
  <!--<p>{{item }}</p>-->
  <h1 v-show="false">{{a[index] = item.bb}}</h1>
   <!-- <h1>index:{{index}}</h1>-->
  </p>
  <h2>a:{{a}}</h2>
  <h2>{{cc}}</h2>
  <!--<button v-on:click="cc">点击</button>-->
 </p>
</template>
<script>
export default {
 name: 'foo',
 data () {
  return {
   msg: '这儿是Foo',
   list:[{
     insertId: 'asfasf252',
     bb:29
   },{
    insertId: '2652',
     bb:20
   },{
    insertId: '996',
     bb:18
   }],
   a:[]
  }
 },
 computed:{
   cc: function(){
     var sum = 0;
     for(var i= 0 ;i< this.a.length; i++) {
        sum += parseInt(this.a[i]);
     }
     return sum;
   }
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
 font-weight: normal;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
</style>
ログイン後にコピー
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vueリクエストデータの値を変更する方法

vue.jsの$setの配列を更新する方法

以上がvue2.0の計算はリストループの累積値を計算しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

PHPでRedisリスト操作を実装する方法 PHPでRedisリスト操作を実装する方法 May 26, 2023 am 11:51 AM

リスト操作 //リストの先頭から値を挿入します。 $ret=$redis->lPush('city','guangzhou');//リストの末尾から値を挿入します。 $ret=$redis->rPush('city','guangzhou');//リストの指定範囲内の要素を取得します。 0 はリストの最初の要素を表し、-1 は最後の要素を表し、-2 は最後から 2 番目の要素を表します。 $ret=$redis->l

JavaでJSONArrayをリストに変換する方法 JavaでJSONArrayをリストに変換する方法 May 04, 2023 pm 05:25 PM

1: JSONArray を List にJSONArray 文字列を List に//JSONArray を初期化するJSONArrayarray=newJSONArray();array.add(0,"a");array.add(1,"b");array.add(2,"c") ; Listlist=JSONObject.parseArray(array.toJSONString(),String.class);System.out.println(list.to

C# で List.Sort 関数を使用してリストを並べ替える方法 C# で List.Sort 関数を使用してリストを並べ替える方法 Nov 17, 2023 am 10:58 AM

C# で List.Sort 関数を使用してリストを並べ替える方法 C# プログラミング言語では、リストを並べ替える必要があることがよくあります。 List クラスの Sort 関数は、この目的のために設計された強力なツールです。この記事では、C# で List.Sort 関数を使用してリストを並べ替える方法を紹介し、読者がこの関数をより深く理解し、適用できるように具体的なコード例を示します。 List.Sort 関数は List クラスのメンバー関数であり、リスト内の要素を並べ替えるために使用されます。この関数は受信します

Java の基本における List の一般的なメソッドとは何ですか Java の基本における List の一般的なメソッドとは何ですか May 14, 2023 am 10:16 AM

1. List インターフェイスの概要 List は順序付けられたコレクションであり、反復可能なコレクションです。 Collection インターフェイスを継承しており、List コレクション内に繰り返し要素を出現させることができ、インデックス (添え字) を介して指定した位置の要素にアクセスできます。 2. 共通メソッドの一覧 - voidadd(intindex, Obejcelement) メソッド 1. voidadd(intindex, Obejcelement) メソッドは、指定された位置に要素要素を挿入し、後続の要素を 1 要素前に移動します。 2.voidadd(intindex,Obejctelemen

Javaで配列をリストに変換する方法 Javaで配列をリストに変換する方法 Apr 19, 2023 am 09:13 AM

1. 最も一般的な方法 (必ずしも最良であるとは限りません) は、Arrays.asList(strArray) を使用することです。配列をリストに変換した後は、リストの追加または削除はできません。リストの確認と変更のみが可能です。それ以外の場合は、例外がスローされます。 。キーコード: Listlist=Arrays.asList(strArray);privatevoidtestArrayCastToListError(){String[]strArray=newString[2];Listlist=Arrays.asList(strArray);//変換されたリストにデータを挿入 list.add( 「1」

Python で list.sort() がソートされたリストを返さないのはなぜですか? Python で list.sort() がソートされたリストを返さないのはなぜですか? Sep 18, 2023 am 09:29 AM

例 この例では、続行する前に、まず list.sort() の使用法を確認します。ここでは、リストを作成し、sort() メソッドを使用して昇順に並べ替えています - #CreatingaListmyList=["Jacob","Harry","Mark","Anthony"]#DisplayingtheListprint("List=",myList)#リストを昇順で並べ替えますmyList .sort(

Vue エラー: 計算された属性はデータ計算に正しく使用できません。解決方法は? Vue エラー: 計算された属性はデータ計算に正しく使用できません。解決方法は? Aug 18, 2023 am 10:58 AM

Vue エラー: 計算された属性はデータ計算に正しく使用できません。解決方法は? Vue で開発する場合、計算属性は非常に一般的に使用される強力な機能であり、データの計算と処理に役立ちます。しかし、場合によっては、計算された属性をデータ計算に正しく使用できないなどの問題が発生するため、この問題を解決する必要があります。この問題を説明する簡単な例を次に示します:&lt;template&gt;&

Vue3の計算関数の詳細説明:計算プロパティを簡単に利用できるアプリケーション Vue3の計算関数の詳細説明:計算プロパティを簡単に利用できるアプリケーション Jun 18, 2023 am 08:45 AM

Vue は非常に人気のあるフロントエンド開発フレームワークであり、非常に便利で実用的な属性計算関数を提供します。 Vue3 では、計算関数もアップグレードおよび改善され、より使いやすく効率的になりました。 computed は最初に値を返す関数であり、Vue のテンプレートで直接使用できます。計算関数の特別な点は、その戻り値が依存する Vue インスタンスのデータに応じて動的に変化することです。

See all articles