Question

<th :class="{'c-' + column, active: sortKey == column}" v-for="column in getColumns()" @click="sortBy(column)"> {{ column }} </th>

我得到无效的表达式：意外的标记+输入

但是语法应该是正确的。

我尝试了20种其他方式，但每个人都失败了

~~即使我只在其中放入column，我也会得到[Object object]而不是实际的列名~~

因此，这在es6模板语法中根本不起作用。仅当我将模板放在index.html文件的<script>标记内

时，此方法才有效

export default{

  template: `
    <div :class="[c-${column}]">
       ....
       <router-link :to="/list/${item.name}"> test </router-link>
       ....
    </div>
  `,

   created(){

   }

 }

我尝试过

${column}   - undefined variable
${$column}  - undefined variable
`${column}` - unexpected identifier
{{column}}  - invalid expression in vue

和其他组合，都不能在es6模板语法内使用。

那么vuejs模板不能与es6模块和模板语法一起使用吗？

Answer 1

对于HTML类绑定，可以使用两种语法：

Object syntax

<div :class="{ selected: isSelected }"></div>

该类的存在将由所使用的data属性的真实性确定。类绑定期望使用以下类型：{ [key: string]: boolean }或Record<string, boolean>。

在使用模板字符串（反引号）作为对象属性名称时，需要将其包装在方括号中。

即：

<div :class="{ [`${dynamicClassName}`]: true }"></div>

Array syntax

还有数组语法，它使我们可以绑定一列类。

<div :class="['selected', 'some-other-class']"></div>

我们可以在数组语法中使用对象语法，如下所示：

<div :class="['some-class', { selected: isSelected }]"></div>

使用模板字符串：

<div :class="[`${dynamicClassName}`, { [`${dynamicClassName2}`]: isSelected }]"></div>

编辑：

如果要使用模板文字，请尝试以下操作：

template: `
    <div :class="'c-' + column">
       ....
       <router-link :to="'/list/' + item.name"> test </router-link>
       ....
    </div>
  `,

Answer 2

访问obj['c-' + column]时，它变得不确定-这是虚假的。您希望它是真实的，所以给它一个像 { 'c-' + column: true, active: sortKey == column }

将其保留为虚假就像拥有sortKey != column，这导致active不会出现在班级列表中。

Answer 3

我不确定问题出在哪里，因为我看不到所有代码（特别是JS），但是我只想添加一个肯定有效的代码段。以下代码似乎可以满足您的要求（或者至少是我认为您想要的）：

function getColumns() {
 return ["a", "b" ,"c"];
}

function sortBy(column) {
 console.log("Do sorting stuff with " + column);
 app.sortKey = column;
}

app = new Vue({
 el: '#app',
 data() {
  return {
   getColumns,
   sortBy,
   sortKey: "a",
  }
 },
})

.c-a {
  color: red;
}
.c-b {
  color: green;
}
.c-c {
  color: blue;
}
.active {
  border: 1px solid black;
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
 <table>
  <tr>
   <th v-for="column in getColumns()"  :class="{['c-' + column]: true, active: sortKey == column}"
      @click="sortBy(column)">
            {{ column }}
   </th>
  </tr>
 </table>
</div>

请注意，如果您希望Vue与columns起反应（即，检测列何时更改），则不要传递getColumns。只需传递columns数组本身即可。然后使用app.columns = ["x", "y", "z"]设置新的列数组，Vue会感知到这一点。这就是它的使用方式。如果您知道getColumns将返回新内容，则可以强制进行更新，但这不是Vue的正确用法。

Vue是一个构建良好的框架，因此不要以为无法做任何事情。只要您使用app.something = newsomething进行更新，它就会有效地重新渲染DOM，并为您提供非常好的语法。

PS：您可能不需要sortBy函数（我假设它只是对表中的行进行排序）。如果您的sortBy仅用于表示逻辑，那就没有用了。所有表示逻辑都可以完全在Vue中。您可以使用computed和methods看到这一点：

function getColumns() {
 return ["First", "Middle" ,"Last"];
}

data = [
 {
  "First": "Bernhard",
  "Middle": "G.F.",
  "Last": "Riemann",
 },
 {
  "First": "Leonhard",
  "Middle": "",
  "Last": "Euler",
 }, 
 {
  "First": "Karl",
  "Middle": "F.",
  "Last": "Gauss",
 },
];

app = new Vue({
 el: '#app',
 methods: {
  headerClass(column) {
    return {
      ['c-' + column.toLowerCase()]: true,
      active: this.sortKey == column
    };
   }
 },
 computed: {
  sortedData() {
   sortingBy = (x, y) => x[this.sortKey] > y[this.sortKey];
   return data.sort(sortingBy);
  },
 },
 data: {
  columns: getColumns(),
  sortKey: "First",
  data,
 },
})

.c-first {
  color: red;
}
.c-middle {
  color: green;
}
.c-last {
  color: blue;
}
.active {
  border: 1px solid black;
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
 <table>
  <tr>
   <th v-for="column in columns" :class="headerClass(column)"
      @click="sortKey = column">
            {{ column }}
   </th>
  </tr>
  <tr v-for="row in sortedData">
   <td v-for="column in columns">
    {{ row[column] }}
   </td>
  </tr>
 </table>
</div>

然后，您可以将所有控制器逻辑与表示形式（如对表进行排序）完全分开。而且，您不会用sortBy污染任何名称空间（在HTML中使用sortBy意味着它必须位于全局名称空间中，这不适用于大型项目）。我希望上面的代码展示了如何使用VueJS来实现完整的MVC分离。

另一个好处是，您不必使用默认的sortKey对数组进行预排序。您可能已经注意到，在我的原始代码中，没有初始的“用a来排序”。 computed版本会自动处理初始情况。当然，这可以通过调用sortBy("a")并可能将“ a”拉入defaultKey变量中来完成。第二个选项仍然更好。

这个答案比我想要的更具广告性，但是“ vuejs只是浪费时间吗？”我认为这是错误的，我认为解释原因将很有用。这并不意味着像React这样的其他框架也不会更好，但是VueJS绝对是表示逻辑的有效选择。

Answer 4

请在创建的方法中使用模板字符串，如下所示。有效。我在演示中使用了一些虚拟值。

@Override
    public int onStartCommand(Intent intent, int flags, int startId) {


    // your code

    NotificationCompat.Builder builder = new NotificationCompat.Builder(this, NOTIFICATION_CHANNEL_ID)
        .setContentTitle("Print Server running..")
        .setContentText("")
        .setTicker("")
        .setContentIntent(pendingIntent);
    Notification notification = builder.build();
        if (Build.VERSION.SDK_INT >= 26) {
            NotificationChannel channel = new NotificationChannel(NOTIFICATION_CHANNEL_ID, NOTIFICATION_CHANNEL_NAME, NotificationManager.IMPORTANCE_DEFAULT);
            NotificationManager notificationManager = (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);
            if (notificationManager != null) {
                notificationManager.createNotificationChannel(channel);
            }
    }
    startForeground(Integer.parseInt(NOTIFICATION_CHANNEL_ID), notification);.
}

Vue.js 2无法插值属性值

4 个答案:

编辑：