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

Question

我是 vue.js 的新手，在单文件组件页面中我想 post 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 是本质上是反应性的变量，我的意思是当你在 vue 实例中更改这些变量时，它们会在视图中自动更改，反之亦然。这就是所谓的双向绑定。

v-model create a two-way binding on a form input element or a component. You can learn more about it here and 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
      };
    }
})

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

What should I do in the data() function and in v-model?

javascript

vue.js

vue-component

代码