鍍金池/ 問答/HTML/ Vue渲染初始化

Vue渲染初始化

1.在做一個答題的界面，選擇答案后會根據(jù)對錯來變色，如下圖，但是在點擊進入下一題時，樣式不會重置，沒有選題情況下，不是默認的黑色
圖片描述

2.對應(yīng)的html代碼

<div class="H-flex-item" id="ti">
    <!--題目-->
    <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-after H-vertical-middle H-touch-active">
        <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12 H-text-show-row-5" style="line-height: 29px;">
           {{lists.title}} 
        </div>
    </div>
    <!--選項-->
    <div class="H-padding-vertical-bottom-5"></div>
    <div  v-for="(list,index) of lists.options" @click="ans(index,lists)" ref="items" class=" H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-after H-vertical-middle H-touch-active">
        <div class=" H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12 H-text-show-row-3" style="line-height: 29px;">
                {{list}}
        </div>
    </div>
</div>

3.對應(yīng)的js代碼

//實力化vue
var vm = new Vue({
    el:"#ti",
    data:{
        lists:'',
        items:''
    },methods:{
        ans:function(index,lists){
            var answer = ['A','B','C','D'];
            if(lists.an==answer[index]){
                H.toast('答對了');
                this.$refs.items[index].style.color = 'limegreen'; 
            }else{
                this.$refs.items[index].style.color = 'red'; 
            }
        }
    }
});
回答
編輯回答
瞄小懶

不需要用refs獲取dom，給答對了和打錯了設(shè)置不同的類，在渲染的時候判斷是答對還是打錯，來設(shè)置不同的類，也可以直接在html里設(shè)置style

<div  v-for="(list,index) of lists.options" @click="ans(index,lists)" ref="items" class=" H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-after H-vertical-middle H-touch-active" :style="color: ['A','B','C','D'].indexOf(list.an) > -1 ? 'limegreen' : 'red'">
        <div class=" H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12 H-text-show-row-3" style="line-height: 29px;">
                {{list}}
        </div>
    </div>
2017年8月6日 19:52
編輯回答
離夢

可以判斷當前問題答案那個值是否為空，沒有那個樣式就是初始化的，有的話就是答案就是紅色的就行了吧

2017年8月17日 22:47