javascript - 在 data() 函数和 v-model 中我应该做什么？

Question

我是 vue.js 的新手，在单文件组件页面中我想在 textarea 和 checkbox 中发布数据(无论是否已检查)。

我知道我需要在 textarea 中添加诸如 v-model 之类的东西，但我不清楚这一点，api 是如下图所示。

我应该在 data() {return {}} 部分做什么？对 vue.js 中的这一部分感到非常困惑，我们将不胜感激。

<template>
  <div>
    <div class="add-show">
      <div>
        <p class="title-comment">comment</p>
        <textarea class="content-comment" placeholder="write sth here" v-model="content"></textarea>
      </div>
       <div class="post-wrap">
        <div></div>
        <div class="post-content">
          <input type="checkbox" class="checkbox">
        </div>
      </div>
      <mt-button type="primary" class="mt-button">submit</mt-button>
  </div>
</template>

<script>
import dataService from 'services/dataService'
export default {
  data () {
    return {
      content: '',
      recommend: false
    }
  },
  methods: {
    addShow: function () {
      dataService.postShow(profile).then(() => {
        this.$toast({
        message: '发布成功',
        position: 'bottom'
        })
      })
    }
  }
}
</script>

<style scoped>
</style>

Answer 1

我已经为您创建了一个示例 fiddle here .

data因为 vue 是本质上是 react 性的变量，我的意思是当你在 vue 实例中更改这些变量时，它们会在 View 中自动更改，反之亦然。这称为双向绑定(bind)。

v-model在表单输入元素或组件上创建双向绑定(bind)。可以了解更多here和 here在官方文档中，这是学习 vue 的一个很好的来源。

代码

HTML:

<div id="demo">
    <div class="add-show">
      <div>
        <p class="title-comment">comment</p>
        <textarea class="content-comment" placeholder="write sth here" v-model="content"></textarea>
      </div>
       <div class="post-wrap">
        <div></div>
        <div class="post-content">
          <input type="checkbox" class="checkbox" v-model="recommend">
        </div>
      </div>
      <button type="primary" class="mt-button">submit</button>
      <br>
      content:: {{content}}
      <br>
      recommend :: {{recommend}}
  </div>

JS:

var demo = new Vue({
    el: '#demo',
    data: function(){
        return {
        content: '',
      recommend: false
      };
    }
})