Vue2+ElementUI学习笔记——v-bind

个人学习笔记，我会一直完善，如果有错请评论区指教。

v-bind实现数据绑定

template

<template>
  <div class="about">
    <h1>这是v-bind案例</h1>
    <p v-bind:style="{ color: textColor }">v-bind将script的数据单向绑定，script数据改变后，v-bind相关的值也会发生改变</p>
    <el-button @click="changeColor">点击变色</el-button>
  </div>
</template>

script

<script>
export default {
  data(){
    return {
      textColor: 'black'
    }
  },
  methods:{
    changeColor(){
      if (this.textColor == 'black') {
        this.textColor = 'red'
      }else if (this.textColor == 'red') {
        this.textColor = 'black'
      }
    },
  }
}
</script>