Vue v-bind指令 - 爱码网

1.1 v-bind 指令被用来响应地更新 HTML 属性，其实它是支持一个单一 JavaScript 表达式（v-for 除外）。

2. 语法

2.1 完整语法：<span v-bind:class="classProperty"></span >，解释：v-bind 是指令，: 后面的 class 是参数，classProperty 则在官方文档中被称为“预期值”。

2.2 缩写语法：<span :class="classProperty"></span >，解释：: 后面的 class 是参数，classProperty 则在官方文档中被称为“预期值”。

3. 用法

3.1 绑定一个属性

全写代码示例：

<template>
<div>
  <p class="p1">{{title}}</p>
  <span v-bind:value="first" class="spancss1">{{text}}</span>
</div>
</template>
<script>
    export default {
        name: "v-bindLearn",
        data() {
          return {
            title: "v-bind学习",
            first: "span1",
            text: "绑定一个属性"
          }
        }
    }
</script>
<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>