15621857753

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

来源:齐鲁CMS 栏目:VUE & VITE 阅读: 日期:2024-07-15

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

效果如下:

VUE,VUE案例

代码如下:

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数组中数据