时间戳

首页 > 解决方案 > Vue.js v-bind 类宽度条件

vue.js - Vue.js v-bind 类宽度条件

问题描述

我开始使用宽度 Vue.js，我想知道如何使用条件宽度v-bind 这是我的代码（错误）：

<input
  type="text"
  class="form-control"
  v-bind:class="{'is-invalid': step_1.project_url.error : 'is-valid'}"
  v-model="step_1.project_url.field"
  placeholder="Project url"
>

标签： vue.js

解决方案

正确的绑定方式是

<input
  type="text"
  class="form-control"
  v-bind:class="{'is-valid': (step_1.project_url.error !== '' && step_1.project_url.error === true), 'is-invalid': (step_1.project_url.error !== '' && step_1.project_url.error === false)}"
  v-model="step_1.project_url.field"
  placeholder="Project url"
>

这将根据您的要求工作

推荐阅读