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";
}

Here's an example in codepen.

Vue.js 点击后附上文字。如何？

Vue.js attach text after clicking. how?

vue.js

vue-router

vue-component

vuejs2

vue-material