鍍金池/ 問答/HTML/ Vue.js 如何讓倆個值相加,求和(不用computed)

Vue.js 如何讓倆個值相加,求和(不用computed)

想在畫面上表示出倆個變量相加后的結(jié)果,但是現(xiàn)在的寫法只顯示最開始的變量值

圖片描述

相關代碼

                    <div class="grid margin-top-20">
                        <section id="section-course" class="col-12 panel not-ready">
                            <h3>全體學習狀況</h3>
                            <div class="status-list">
                                <div class="status">
                                    <dl class="completed">
                                        <dt>修了</dt>
                                        <dd>{{parseInt(info.completed + info.passed)}}</dd>
                                    </dl>
                                </div>
                                <div class="status">
                                    <dl class="incomplete">
                                        <dt>學習途中</dt>
                                        <dd>{{parseInt(info.failed + info.incomplete)}}</dd>
                                    </dl>
                                </div>
                                <div class="status">
                                    <dl class="not-attempted">
                                        <dt>未學習</dt>
                                        <dd>{{parseInt(info.notAttempted)}}</dd>
                                    </dl>
                                </div>
                            </div>
                    </div>

如何解決?這個地方Vue有關的知識點?

回答
編輯回答
巫婆

寫法應該沒問題,先確定下info變量是不是聲明正確了,并且值有變化.

2017年4月3日 06:29
編輯回答
念舊

各位朋友謝謝回答 問題已經(jīng)解決 .我寫的代碼看上去沒有問題,但是可能在Vue里面 這個 + 只有在數(shù)字的時候才會加法計算.于是把變量用Number()方法轉(zhuǎn)換下就OK了.修改后的代碼

                <div class="status-list" id="section-course" v-cloak >
                  <div class="status">
                    <dl class="completed">
                      <dt>修了</dt>
                      <dd>{{parseInt(Number(info.completed) + Number(info.passed))}}</dd>
                    </dl>
                  </div>
                  <div class="status">
                    <dl class="incomplete">
                      <dt>學習途中</dt>
                      <dd>{{parseInt(Number(info.incomplete) + Number(info.failed))}}</dd>
                    </dl>
                  </div>
                  <div class="status">
                    <dl class="not-attempted">
                      <dt>未學習</dt>
                      <dd>{{parseInt(info.notAttempted)}}</dd>
                    </dl>
                  </div>
                </div>
2017年12月5日 23:55
編輯回答
祈歡

非復雜可以不用computed，可以在mounted:function(){ }里輸出一下info看一下里面各個屬性的情。
如果擔心mounted時沒有完全渲染，可以照著官網(wǎng)改一下（https://cn.vuejs.org/v2/api/#...）
比如：

mounted: function () {
  this.$nextTick(function () {
    console.log('info', info)
  })
}
2017年1月8日 02:27