<!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. C++学习 - 虚表,虚函数,虚函数表指针学习笔记

    http://blog.csdn.net/alps1992/article/details/45052403 虚函数 虚函数就是用virtual来修饰的函数.虚函数是实现C++多态的基础. 虚表 每个 ...

  2. superset 配置连接 hbase

    1. 简单说明 最近配置superset查询hbase, 根据网上查询到的文档和经验,成功了一次(python3.4  superset 0.20.),后边重试换各种版本就不行了.最后根据错误终于发现 ...

  3. 《C#高效编程》读书笔记11-理解短小方法的优势

    我们最好尽可能的编写最清晰的代码,将优化交给JIT编译器完成.一个常见的错误优化是,将大量逻辑放在一个函数中,以期减少额外的方法调用开销.这种将函数逻辑直接写在循环内部的常见优化做法却会降低.NET应 ...

  4. jmeter压测配置

    windows上面修改最大使用端口数和time_await等待时间 注册表需要添加两个配置,位置:HKEY_LOCAL_MACHINE \ SYSTEM \ CurrentControlSet \ S ...

  5. python_1基础学习

    2017年12月02日 20:14:48 独行侠的守望 阅读数:221 标签: python 更多个人分类: Python编辑版权声明:本文为博主原创文章,转载请注明文章链接. https://blo ...

  6. websocket的加密和解密

    补充个小知识点:按位与运算 按位与运算是同位都为1才为1,有一个不为1就是0 websocket_hand import socket, base64, hashlib import websocke ...

  7. MVC+Nhibernate+jquery+easyui递归实现多级菜单

    1.新建访问的控制器动作返回视图,在视图中使用easyui的treegrid插件来得到后台得到的json数据显示多级菜单 public ActionResult Menu() { return Vie ...

  8. COGS 11. 运输问题1

    ★★☆   输入文件:maxflowa.in   输出文件:maxflowa.out   简单对比时间限制:1 s   内存限制:128 MB [问题描述]     一个工厂每天生产若干商品,需运输到 ...

  9. 用JavaScript访问SAP云平台上的服务遇到跨域问题该怎么办

    关于JavaScript的跨域问题(Cross Domain)的讨论, 网上有太多的资源了.国内的程序猿写了非常多的优秀文章,Jerry这里就不再重复了. 直入主题,最近我正在做一个原型开发:通过SA ...

  10. MVC文件下载和webform也能使用的下载方法

    public ActionResult Index() { DownloadMethod("text/plain", "C:/Users/sunny/Pictures/S ...