Question

我有一些可通过以下方式访问的数据：

{{ content['term_goes_here'] }}

...并评估为true或false。我想根据表达式的真实性添加一个类，如下所示：

<i class="fa" v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i>

其中true为我提供了课程fa-checkbox-marked，而false会给我fa-checkbox-blank-outline。我上面写的方式给了我一个错误：

- invalid expression: v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"

我应该如何编写它才能有条件地确定课程？

Answer 1

使用object syntax。

export default {
    methods: {
        function isPath (path) {
           return this.$route.path === path
        }
    }
}

当对象变得更复杂时，将其提取到方法中。

v-bind:class="{'fa-checkbox-marked': content['cravings'],  'fa-checkbox-blank-outline': !content['cravings']}"

最后，您可以将此功能用于此类任何内容属性。

v-bind:class="getClass()"

methods:{
    getClass(){
        return {
            'fa-checkbox-marked': this.content['cravings'],  
            'fa-checkbox-blank-outline': !this.content['cravings']}
    }
}

Answer 2

<i class="fa" v-bind:class="cravings"></i>

并添加计算：

computed: {
    cravings: function() {
        return this.content['cravings'] ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline';
    }
}

Answer 3

为什么不将对象传递给v-bind：class来动态切换类：

.post-container {
  background-color: rgb(0, 224, 255);
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-areas: 'title title' 'photo comments';
  grid-gap: 10px;
  padding: 10px;
}

.Title {
  background-color: rgb(47, 0, 99);
  width: 100%;
  grid-area: title;
  color: white;
}

.Photo {
  grid-area: photo;
}

.Photo img {
  vertical-align: top;
}

.Comments {
  background-color: rgb(11, 75, 82);
  grid-area: comments;
  color: white;
  position: relative;
}

.Comments ul {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: auto;
}

.post-container img {
  width: 100%;
}

这是Vue docs的建议。

Answer 4

问题是刀片，试试这个

        for (int i = 0; i < a.pattern_cnt; i++) {
            for (int j = 0; j < a.T_element_cnt; j++) {
             System.out.printf("%.3f\t", a.O[i][j]); //console output

             t1.append(String.format("%.3f\t", a.O[i][j]));//jtextarea output
            }

            System.out.println();
            t1.append("\n");

        }

Answer 5

如果要对具有 Vue.js 中的条件的同一元素应用单独的CSS类您可以使用以下给定的方法。它在我的方案中有效。

html

 <div class="Main" v-bind:class="{ Sub: page}"  >

在这里，主要和次要是同一div元素的两个不同的类名。 v-bind：class 指令用于在此处绑定子类。页面是我们用于在值更改时更新类的属性。

js

data:{
page : true;
}

如果需要，我们可以在此处应用条件。因此，如果page属性变为true，则 Main 和 Sub 会包含CSS样式。但是如果为false，则将仅使用 Main 类CSS样式。

Answer 6

您可以使用带有反引号`` 之类的字符串模板：

:class="`${content['cravings'] ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline'}`"

Vue.js：条件类样式

6 个答案: