5. 模板语法，动态指令,v-bind

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <!--动态指令,这相当于是class="d1"，后面的d1其实也是变量 事件名称也可以是变量-->
  <div v-bind:[attributeName]="d1"></div>
  <!--id="d1"-->
  <button @click="toggleColor">点击切换颜色</button>
  <!--事件名称是变量  相当于@click-->
  <button @[eventName]="toggleColor">点击切换颜色</button>

</template>

<script>
//命令式
//document.querySelector("h1").innerHTML="helloworld"
//声明式, 先声明出变量。
export default{
  name:'App',
  data(){
    return{
      attributeName:"class",
      d1:"d1",
      eventName:"click"
    }
  },
  methods:{
    toggleColor(){
      this.attributeName="id"
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
#d1{
  widows: 100px;
  height: 100px;
  background: yellow;
}
/*.d1 表示类名 */
.d1{
  widows: 100px;
  height: 100px;
  background: green;
}
</style>