<!--
  * class name with data binding
-->

<template>
  <div @click="update">
    <text class="a">Hello</text>
    <text class="b">Hello</text>
    <text :class="['a', x]">Hello</text>
  </div>
</template>

<style scoped>
  .a {font-size: 48px;}
  .b {color: #ff0000;}
</style>

<script>
  module.exports = {
    data: {
      x: ''
    },
    methods: {
      update: function (e) {
        this.x = 'b'
        console.log('x', this.x)
      }
    }
  }
</script>