<!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. 洛谷 P5640 【CSGRound2】逐梦者的初心

    洛谷 P5640 [CSGRound2]逐梦者的初心 洛谷传送门 题目背景 注意:本题时限修改至250ms,并且数据进行大幅度加强.本题强制开启O2优化,并且不再重测,请大家自己重新提交. 由于Y校的 ...

  2. java启动参数

    java命令启动应用所使用的参数,基本是用于JVM的,某种程度上也叫做JVM参数.总的来说,java启动参数共分为三大类,分别是: 标准参数(-):相对稳定的参数,每个版本的JVM都可用. 非标准X参 ...

  3. POJ3974Palindrome（Manacher）

    传送门 题目大意:求最长回文串 题解:Manacher 代码: #include<cstdio> #include<cstring> #include<iostream& ...

  4. JAVA 网络编程 - 实现 群聊 程序

    在实现 这个 程序之前, 我们 需要 了解 一些 关于 Java 网络 编程 的 知识. 基本 的 网络知识: 网络模型 OSI (Open System Interconnection 开放系统互连 ...

  5. docker-mysql-使用docker运行mysql8

    1, 下载镜像, 我用的是8 docker pull mysql: 2, 启动镜像 docker run \ --name mysql8 \ -p : \ -v /Users/wenbronk/Con ...

  6. 依赖注入在 dotnet core 中实现与使用：2 使用 Extensions DependencyInjection

    既然是依赖注入容器,必然会涉及到服务的注册,获取服务实例,管理作用域,服务注入这四个方面. 服务注册涉及如何将我们的定义的服务注册到容器中.这通常是实际开发中使用容器的第一步,而容器本身通常是由框架来 ...

  7. [debug] 关闭vs的增量链接

    1. 什么是增量链接? 答:采用Debug模式下,函数地址并不是该函数的开始部分,而是跳转到一个 jmp 函数地址. 比如,一个函数 test(),其地址 test 对应的汇编语句是 "jm ...

  8. oracle学习笔记（十九） 子程序——存储过程

    子程序--存储过程 我们可以使用子程序来封装一下我们需要的操作,子程序又有存储过程,函数和触发器. 这里先学习存储过程~ 语法 create [or replace] procedure $proce ...

  9. c#日期和时间戳互转

    using System; using System.Collections.Generic; using System.Data; using System.Reflection; namespac ...

  10. PlayJava Day006

    今日所学: /* 2019.08.19开始学习,此为补档. */ 构造方法没有返回值(即return为空). this:实例(对象)的引用. JVM:①static方法区:存静态数据   ②栈区:引用 ...