<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->

    <script type="text/javascript" src="../js/vue.js"></script>

</head>

<body>

<div id="hdcms">

    <li v-for="v in comments">

        {{v.content}}

    </li>

    <!--当textarea里的内容改变时,会动态改变data/current_content-->

    <textarea v-model="current_content" cols="30" rows="10"></textarea><br>

    <button v-on:click="push">发表</button>

</div>

<script>

    var app = new Vue({

        el: '#hdcms',

        data: {

            //当前用户输入内容

            current_content:'',

            comments: [

                {content: '测试一'},

                {content: '测试二'},

            ]

        },

        methods:{

            push(){

                //用data/current_content里动态改变的值,声明一条记录赋值给变量content

                var content = {content:this.current_content}

                //动态把content加入data/comments的数组里,动态的加入页面li列表里

                this.comments.push(content);

                //操作完后,把data/current_content里的值清空

                this.current_content ='';

            }

        }

    });

</script>

</body>

</html>

效果:

20.VUE学习之-变异方法push的留言版实例讲解的更多相关文章

  1. 020——VUE中变异方法push的留言版实例讲解

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. Vue 变异方法Push的留言板实例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 24.VUE学习之-变异方法filter与regexp实现评论搜索功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 19.VUE学习之- v-for与computed结合功能 筛选实例讲解

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 29.VUE学习之--键盘事件.键盘修饰符的实例讲解

    键盘事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  6. Vue列表渲染-变异方法

    Vue 包含一组观察数组的变异方法,变异方法 (mutation method),顾名思义,会改变被这些方法调用的原始数组 所以它们也将会触发视图更新.这些方法如下: push() pop() shi ...

  7. 021——VUE中变异方法 push/unshift pop/shift

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 21.VUE学习之-操作data里的数组变异方法push&unshit&pop&shift的实例应用讲解

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 06.VUE学习之非常实用的计算属性computed实例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

随机推荐

  1. (转)深入浅出linux系统umask值及其对应的文件权限讲解

    浅出linux系统umask值及其对应的文件权限讲解 原文:http://blog.51cto.com/oldboy/1060032 缘起:1.此文的撰写特别为感谢51cto的博客工作人员和领导,老男 ...

  2. Linux中ext2文件系统的结构

    1.ext2产生的历史 最早的Linux内核是从MINIX系统过渡发展而来的.Linux最早的文件系统就是MINIX文件系统.MINIX文件系统几乎到处都是bug,采用的是16bit偏移量,最大容量为 ...

  3. 《从0到1学习Flink》—— Apache Flink 介绍

    前言 Flink 是一种流式计算框架,为什么我会接触到 Flink 呢?因为我目前在负责的是监控平台的告警部分,负责采集到的监控数据会直接往 kafka 里塞,然后告警这边需要从 kafka topi ...

  4. bank conflct 一句话总结

    由于最新的多播模式区别于原来的广播模式,原来同一个warp不同线程访问同一个bank的相同地址不再是bank conflict, 现在总结为:只要同一个 warp 的不同线程会访问到同一个 bank ...

  5. 华为服务器操作系统EulerOS V2.0

    平台: linux 类型: 虚拟机镜像 软件包: java-1.8.0 php-5.4.16 python-2.7.5 qt-4.8.5 tomcat-7.0.69 basic software eu ...

  6. LAMP stack-5.6.22 (OpenLogic CentOS 7.2)

    平台: CentOS 类型: 虚拟机镜像 软件包: apache2.4.20 mysql5.6.30 php5.6.22 apache application server basic softwar ...

  7. Nginx+Keepalived双主轮询负载均衡

    双主模式使用两个VIP,前段有2台服务器,互为主从,两台服务器同时工作,不存在资源浪费情况.同时在前端的DNS服务器对网站做多条A记录,实现了Nginx的负载均衡,当一台服务器故障时候,资源会转移到另 ...

  8. shiro无法进入授权的方法org.crazycake.shiro.exception.PrincipalInstanceException: class java.util.HashMap must has getter for field: id

    rg.crazycake.shiro.exception.PrincipalInstanceException: class java.util.HashMap must has getter for ...

  9. pta 编程题21 公路村村通

    其它pta数据结构编程题请参见:pta 题目 这道题考察最小生成树问题,用的是Prim算法. 和Dijkstra算法相比,没有了collect数组,因为dist[v] == 0就代表v被已收录. #i ...

  10. linux 命令——47 iostat (转）

    Linux系统中的 iostat 是I/O statistics(输入/输出统计)的缩写,iostat工具将对系统的磁盘操作活动进行监视.它的特点是汇报磁盘活动统计情况,同时也会 汇报出CPU使用情况 ...