vue - 绑定值

观察下面这个标签，标签的名称是 button，除此之外还有 3 个部分：

• 组件的属性（style），
• 显示文字内容（btn），
• 还有事件（click）。

<button style:"color:gray" click="">btn<button>

这 3 个部分绑定的语法是不一样的。

<template>
  <!--  绑定文本、样式、事件 -->
<button v-bind:style="style" v-on:click="click">{{ label }}</button>
  <!--  简写方式，效果上面一致 -->
<button :style="style" @click="click">{{ label }}</button>
</template>

<script>

/**
 * 一个测试组件
 */
export default {
    name: "Test",
    /** 声明的字段、对象放在这里 */
    data: function () {
        return {
            // 样式
            style: '',
            // 文字
            label: '提交',
        }
    },
    /** 事件放在这里 */
    methods: {
        click: function (evt) {
            // do sth.
        }
    }
}
</script>

<style scoped>
  /**
   * 这里可以写一些局部样式，当前界面有效
   */
</style>