vue 怎样才可以在标签中设置变量

Question

我是这样写的 但是会报错 那这个name应该怎么写 是格式不对么？

以下是代码

<template>
  <div>
    <h1>Welcome!</h1>
    <nuxt-link to="/PageOne">去往page1</nuxt-link>
    <div class="{{name}}"></div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        name: 'one'
      }
    }
  }
</script>

Answer 1

第一种方法，直接赋值

<div :class="name"></div>

第二种方法

<div :class="{'one':isOne}"></div>

data(){
    return{
        isOne:true
    }
}

Answer 2

官方文档搜class（Class 与 Style 绑定）

<div v-bind:class="{ active: isActive }"></div>

双括号展示数据用的

Answer 3

仔细看下文档，这个问题就解决

Answer 4

如果绑定多个类的情况，可以考虑：

<div :class="[ 'one',bTwo? 'two': 'three']"></div>

data(){
    return{
        bTwo:true
    }
}

<style>
.one{}
.two{}
.three{}

</style>