vue.js - vue如何修改css样式
本文介绍了vue.js - vue如何修改css样式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
使用vue绑定数据时,我给符合条件的数据选项添加了指定的class——correct,我想要在点击提交按钮之后,再显示出.correct的样式,如何解决?
绑定数据的代码如下:
<template>
<div class="test-item">
<p class="title">{{index+1}}.{{obj.title}}</p>
<ul class="choice-list">
<li v-for="(item,index) in obj.choice" :class="{correct: index == answer-1}">
<input type="radio" :name="identy" :value="index == answer-1" @click="checkAnswer">
{{index | Char(index)}}.{{item}}
</li>
</ul>
</div>
</template>
渲染结果如下
顺便再问一个问题,如何在点击提交按钮后禁止<input type="radio">的点击事件?
解决方案
<li :class="{ correct: isSubmitted }">正确答案</li>
<input type="radio" disable="isSubmitted">1</input>
...
<div id="submit" @click="isSubmitted = true">提交<div>
export default {
data () {
return {
isSubmitted: false
}
}
}
这篇关于vue.js - vue如何修改css样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文