带有数据和方法的 Vue 组件答案

【问题标题】：Vue Components with data and methods带有数据和方法的 Vue 组件
【发布时间】：2020-08-26 04:23:24
【问题描述】：

我正在参加一个使用机器人更正代码的在线课程。在本课程中，我学习 HTML、JS 和 Vue.JS。

assignemnt 是创建一个组件，greet，它在使用 <greet></greet> 调用时产生 <div>Welcome, Alice!</div> 该作业还希望我使用 data 和 methods 来实现它，所以它改为使用 Welcome, Bob当您单击组件中的 div 元素时。它告诉我在组件中使用data 和methods 键。

到目前为止，这是我的代码，但我被卡住了。 HTML

<body>
    <div id="app"><greet></greet>
    </div>
</body>

Vue 代码：

Vue.component('greet', {
  data() {
    return {   
    }
  },
  template: '<div>Welcome</div>'
})

new Vue({ el: '#app' })

如何让它显示欢迎，爱丽丝！当按下时，它会说欢迎，鲍勃！ ? 机器人给了我一个输出

file.js
    ✓ exists
    ✓ is valid JavaScript
    1) renders the correct markup when no clicks are made
    2) renders the correct markup when one click is made

【问题讨论】：

标签： javascript html vue.js

【解决方案1】：

在您的数据属性中，定义一个可以访问name 的变量。在这种情况下，我们将使用 Alice 的值对其进行初始化：

data () {
  return {
    name: 'Alice'
  }
}

我们现在可以添加一个 click 方法并将其绑定到我们的 div 元素，以便它交换名称：

methods: {
  swap () {
    this.name = 'Bob'
  }

}

最后，我们需要修改template 以接收click handler 并使用动态绑定来显示来自data 对象的name 属性：

template: `<div @click="swap">Welcome, <span v-text="name"></span></div>`

请注意，在上图中，v-text 是一个directive，我们已经将name 属性的值绑定到它，我们通过分配给swap 函数的@click 处理程序对其进行修改.

【讨论】：

回合给了我一个输出。 file.js ✓ 存在 ✓ 是有效的 JavaScript 1) 在没有点击时呈现正确的标记 2) 在单击时呈现正确的标记

【解决方案2】：

您可以在 div 上使用事件@click，将点击事件绑定到特定方法，在这种情况下我创建toggleName()

  Vue.component('greet', {
      data() {
        return {
         name: 'Alice'
        }
      },
      methods: {
        toggleName() {
          this.name = this.name == 'Alice' ? 'Bob' : 'Alice';
        }
      },
      template: '<div @click="toggleName">Welcome {{ name }}</div>'
    })

然后我们创建一个访问data 中定义的属性的方法，在这种情况下是name 当我们使用保留字this 时，我们访问我们的实例并从那里访问属性name .然后我们为名称创建一个切换开关。

为了访问我们模板中的变量，我们需要使用特殊的花括号 {{ name }} 这次不需要this。

【讨论】：

机器人给了我一个输出：` + 实际 - 预期 + '' - '
Välkommen, Alice!
' + 预期 - 实际 - +
Välkommen，爱丽丝！
`
没有得到最后的结果，当然，您应该进行一些修改，使其符合您的期望。