vue.js - Vue.js 单击后附加文本。如何？

Question

我有这个 Vue Material (Vue.js) 标签，带有函数

<md-button id="" v-on:click.native="requestSelected(request)">


methods: {

        requestSelected: function(request) {
            request.accepted = true;
            console.log(request);

            var card = document.getElementById('text');
            var accept = document.createTextNode("Job selected");

            card.appendChild(accept);

        }

单击后，我正在尝试在 DOM 上添加一些文本，有人可以向我推荐一些 Vue js 文档来检查信息吗

Answer 1

在您的 Vue 组件中，为您的显示文本创建一个数据属性：

data() {
  return {
    displayText: '',
  }
}

然后，只需displayText在您的模板中添加一个引用，如下所示：

{{ displayText }}

Vue 最初不会显示任何内容，因为displayText它是空的，并且会在displayText更改时自动更新 DOM。

您可以像这样更改requestSelected方法中的文本：

requestSelected: function(request) {
  request.accepted = true;
  this.displayText = "Job selected";
}

这是codepen中的一个例子。