注：例項環境 vue cli構建的專案

app.vue

<template>
  <Example></Example>
</template>

<script>
import Example from './components/Example'

export default {
  name: 'App',
  components: {
    Example
  }
}
</script>

<style>

</style>

Example.vue

<template>
    <div>
       <div :class="className" :style="styleName">
           <div>
               <button @click="changeClass('class1')">灰色</button>
               <button @click="changeClass('class2')">黑色</button>
               <button @click="changeClass('class3')">紅色</button>
               &nbsp;&nbsp;<span>|</span>&nbsp;&nbsp;
               <button @click="changeStyle('left')">居左</button>
               <button @click="changeStyle('center')">居中</button>
               <button @click="changeStyle('right')">居右</button>
           </div>
           <p>
               class 繫結
           </p>

       </div>
    </div>
</template>

<script>
    export default {
        name: "Example",
        data:function () {
            return {
                className: 'class1',
                styleName: 'left'
            }
        },
        methods:{
            changeClass:function (className) {
                this.className = className;
            },
            changeStyle:function (styleName) {
                this.styleName ={
                    textAlign: styleName
                };
            }
        }
    }
</script>

<style scoped>
.class1{
    background-color: #ccc;
    color:#000;
}
.class2{
    background-color: #000;
    color:#fff;
}
.class3{
    background-color: red;
    color: yellow;
}
</style>
 

重新整理瀏覽器