VUE案例2：点击发表评论并显示在评论区

本文介绍了VUE案例2：点击发表评论并显示在评论区，主要功能就是提供一个输入框，点击发表情评论按钮，评论显示在评论区。

效果如下：

代码如下：

template

<template>
  <div class="demo">
    <input type="text" v-model="bbs">
    <button type="button" @click="sub">发表评论</button>
    <div id="bbs-box">
      <p v-for="msg in msgs">{{ msg }}</p>
    </div>
  </div>
</template>

 

script

<script>
export default {
  data() {
    return {
      bbs: "",
      msgs: []
    }
  },
  methods: {
    sub() {
      this.msgs.push(this.bbs)
      this.bbs = ""
    }
  }
};
</script>

开发要点：

使用v-model与data中com变量绑定

点击按钮之后触发sub函数

在函数中将com数据push追加到msgs数组中

使用v-for循环创建p标签展示msgs数组中数据