<!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. UnityVR Steam_VR开发工具插件---VRTK 自带案例分析

  2. java编程如何实现多条2017-08-08 22:10:00.0这样的时间数据，相差多少天？（隔24小时为相差1天，否则为0天）

    不多说,直接上干货! 这是yyyy-MM-dd HH:mm:ss.S     GetIntervalDays.java package zhouls.bigdata.DataFeatureSelect ...

  3. 【Unity3D】用继承EditorUpdater类来实现Editor模式下的后台处理

    EditorWindow类的OnGUI函数只会在窗口焦点处于Editor窗口上的时候才会运行.如果希望焦点不在Editor窗口上的时候,它也能实时更新,可以实现以下方法: OnDestroy OnDe ...

  4. xcrun -sdk 选择

    在将FFmpeg编译成IOS版的时候,接触到编译脚本的一段(删减了部分): for ARCH in $ARCHS do if [ "$ARCH" = "i386" ...

  5. agc016C - +/- Rectangle(构造 智商题)

    题意 题目链接 Sol 我的思路:直接按样例一的方法构造,若$h \times w$完全被$N \times M$包含显然无解 emm,wa了一发之后发现有反例:1 4 1 3 我的会输出[1 1 - ...

  6. Android 仿电商app商品详情页按钮浮动效果

    1.效果图如下: 这效果用户体验还是很酷炫,今天我们就来讲解如何实现这个效果. 2.分析 为了方便理解,作图分析 如图所示,整个页面分为四个部分: 1.悬浮内容,floatView 2.顶部内容,he ...

  7. 解决Android Studio和Android SDK Manager无法在线更新的问题[转]

    升级时提示 Connection failed. Please check your network connection and try again 修改安装目录下bin\studio.exe.vm ...

  8. StringBuffer是可变的还是不可变的？

    前言:我们知道String类的修饰符是final,其char[] value也是由final修饰的,每次给String变量赋一个新值,都会创建一个新的String对象,很多有涉及到字符串本身的改变都是 ...

  9. linux 命令——56 ss(转）

    ss是Socket Statistics的缩写.顾名思义,ss命令可以用来获取socket统计信息,它可以显示和netstat类似的内容.但ss的优势在于它能够显示更多更详细的有关TCP和连接状态的信 ...

  10. 使用Java程序消费SAP Leonardo的机器学习API

    以sap leonardo作为关键字在微信上搜索,能搜到不少文章.但是我浏览了一下,好像没有发现有从具体编程角度上来介绍的.所以我就贡献一篇. 需求 开发一个Java程序,用户可以指定一张图片,该Ja ...