vue中的自定义属性并获得属性的值方式

如果你想在Vue中实现自定义属性，并且获取属性的值，可以使用v-bind指令或简写的冒号(:)来绑定自定义属性。接下来是一些示例说明。

示例1：绑定简单的自定义属性

如果你想绑定一个简单的自定义属性，可以直接使用v-bind或简写的冒号(:)。

<template>
  <div v-bind:data-name="userName">{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      userName: "John Doe",
      message: "Hello World"
    };
  }
};
</script>

这里我们绑定了一个名为data-name的自定义属性，并将其与userName绑定。最终渲染的HTML将如下所示：

<div data-name="John Doe">Hello World</div>

在此示例中，你可以使用getAttribute()方法获取自定义属性的值, 具体请参考下面的代码示例。

const name = document.querySelector('div').getAttribute('data-name');
console.log(name); // 输出：John Doe

示例2：动态生成自定义属性

你也可以使用动态属性的方式来生成自定义属性。如下所示：

<template>
  <div v-bind:[dataAttr]="attrValue">{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      dataAttr: "data-source",
      attrValue: "datasource",
      message: "Hello World"
    };
  }
};
</script>

在此示例中，我们使用了v-bind:[attributeName]的语法来绑定动态属性。我们将dataAttr变量与data-source属性绑定，并将其与attrValue的值绑定。

最终渲染的HTML将如下所示:

<div data-source="datasource">Hello World</div>

在此示例中，你可以使用getAttribute()方法获取自定义属性的值, 具体请参考下面的代码示例。

const source = document.querySelector('div').getAttribute('data-source');
console.log(source); // 输出：datasource

希望这个Markdown格式的攻略能对你有帮助！