<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

    <title id="title">{{title}}</title>

</head>

<body>

<div id="ask"><!--vue不能控制body和html的标签-->

    <ul>

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

            {{v.content}}

        </li>

    </ul>

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

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

</div>

<script>

    var vue = function (options){new Vue(options)};

    vue({

        el:'#title',

        data:{

            title:'Vue 变异方法Push的留言板实例'

        }

    });

    var app = vue({

        el:'#ask',

        data:{

            content:'',

            list:[

                {'content':'hello'},

                {'content':'简单记录'}

            ]

        },

        methods:{

            push(){

                var content_push = {'content':this.content};

                this.list.push(content_push);

                this.content='';

            }

        }

    });

</script>

</body>

</html>

Vue 变异方法Push的留言板实例的更多相关文章

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

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

  2. 20.VUE学习之-变异方法push的留言版实例讲解

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

  3. Vue 变异方法filter和正则RegExp对评论进行搜索

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

  4. Vue 变异方法sort&reverse对评论进行排序

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

  5. Vue 变异方法splice删除评论功能

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

  6. Vue 变异方法unshift&pop&shift

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

  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. vue变异方法

    push()  往数组最后面添加一个元素,成功返回当前数组的长度    pop()  删除数组的最后一个元素,成功返回删除元素的值    shift()  删除数组的第一个元素,成功返回删除元素的值u ...

随机推荐

  1. flask中的endpoint、自定义转化器、与djnago中session区别、利用装饰器实现登录认证

    flask路由中的endpoint 与自定义转化器 ''' endpoint主要用于 反向解析, 例如:login函数中配的路由是/login,其中endpoint='lg' 则在其他函数,可以用 u ...

  2. Go语言系列教程

    一 Go介绍与开发环境搭建 01-Go语言简介 02-开发环境搭建 03-Go语言集成开发环境之GoLand安装使用 04-Go语言集成开发环境之VS Code安装使用 05-Go包管理详解 二 Go ...

  3. Paper | Highway Networks

    目录 1. 网络结构 2. 分析 解决的问题:在当时,人们认为 提高深度 是 提高精度 的法宝.但是网络训练也变得很困难.本文旨在解决深度网络训练难的问题,本质是解决梯度问题. 提出的网络:本文提出的 ...

  4. 【shell脚本】nginx启动脚本

    [root@localhost init.d]# cat nginx #!/bin/bash #nx Startup script for the Nginx HTTP Server # it ver ...

  5. Chapter 2 ：重构的原则

    1,什么是重构? 在不改变软件可观察行为的前提下,使用一些重构的手法,提高代码可读性. 换句话说,在保持软件可用的前提下,修改代码使得更加容易被理解. 2,为什么重构? 为了后续的代码维护和修改,易读 ...

  6. 浏览器关闭后Session真的消失了吗？

    今天想和大家分享一个关于Session的话题: 当浏览器关闭时,Session就被销毁了?  我们知道Session是JSP的九大内置对象(也叫隐含对象)中的一个,它的作用是可以保 存当前用户的状态信 ...

  7. C#排序案例

    using System; namespace 排序案例 { class Program { static void Main(string[] args) { //定义随机数列 int a, b, ...

  8. frigate_TUNNEL

    #coding=utf-8 Result=open('result.txt',"w") FileTunnel = open('tunnel.txt').readlines() Ne ...

  9. Python数据分析揭秘知乎大V的小秘密

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 清风小筑 PS:如有需要Python学习资料的小伙伴可以加点击下方链 ...

  10. Java日期时间API系列3-----Jdk7及以前的日期时间类的不方便使用问题

    使用Java日期时间类,每个人都很熟悉每个项目中必不可少的工具类就是dateutil,包含各种日期计算,格式化等处理,而且常常会遇到找不到可用的处理方法,需要自己新增方法,处理过程很复杂. 1.Dat ...