动态class与三目运算符结合的坑

栗子同学lz

已于 2022-07-19 17:10:11 修改

阅读量1k

点赞数 1

分类专栏：笔记文章标签： class vue.js

于 2022-01-05 11:38:23 首次发布

本文链接：https://blog.csdn.net/qq_48648782/article/details/122319908

版权

笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

动态class与三目运算符结合的坑

背景：用户选中“同意协议”，按钮变成绿色；未选中是灰色

思路：选框未被选中时，按钮时灰色，此时是notAgree的class，选中时变成agreed的class

采用动态class与三目运算符结合的方式

<template>
	<div class="con_button" :class="input_check ? 'agreed' : 'notagree'">确认添加</div>
</template>

补充：微信小程序原生绑定动态class

<view class="login_but {{inputPhone && checked ?  'login_but_activated': ''}}" >登录</view>

注意：

三目运算中，类名要用单引号，否则不能正确渲染，会报错

报错如下：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "agreebtn" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.