<!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. 了解Unix进程(3)

    fork() 系统调用可以创建新的进程.然后查看进程ID和父进程ID使用getpid()和getppid()函数. 使用C语言描述: #include <unistd.h> #includ ...

  2. 27 个Jupyter Notebook的小提示与技巧

    不多说,直接上干货! 见 http://liuchengxu.org/pelican-blog/jupyter-notebook-tips.html

  3. nginx 添加https支持

    自行颁发不受浏览器信任的SSL证书为晒晒IQ网颁发证书.ssh登陆到服务器上,终端输入以下命令,使用openssl生成RSA密钥及证书. # 生成一个RSA密钥 $ openssl genrsa -d ...

  4. asp.net mvc网站的发布与IIS配置

    一.安装IIS (如果服务器上已经安装了就跳过) 控制面板——程序——程序功能——打开或关闭windows功能——勾选Inertnet信息服务下面所有选项——确定 二.获取发布文件(如果已经发不好就跳 ...

  5. android 开发DatePickerDialog/TimePickerDialog对话框的实现

    AndroidAPI提供了Dialog对话框控件,DatePickerDialog/TimePickerDialog均是AlertDialog的子类,通过DatePickerDialog/TimePi ...

  6. synchronized重入后抛出异常，锁释放了吗

    synchronized: 用于同步方法或者代码块,使得多个线程在试图并发执行同一个代码块的时候,串行地执行.以达到线程安全的目的. 允许重入: 在多线程的时候是这样的,但是对于单线程,是允许重入的, ...

  7. Linux - 数值运算

    Shell - 数值运算 因为shell脚本是属于弱语言,没有变量类型的概念,所以定义变量会默认为字符串.就算看上去是一个数字,当直接进行计算时,就会出错: x=1 echo $x+=1 # 输出1+ ...

  8. 一、 Spring IOC 简介

    一 . 什么是IOC(Inversion of Control) IOC :控制反转,也称为依赖注入(DI).听起来有点云里雾里,他到底是个啥,为什么Spirng中最基础的就是它? 我们的项目其实都是 ...

  9. RStudio Server-0.99.902 (OpenLogic CentOS 7.2)

    RStudio Server-0.99.902 (OpenLogic CentOS 7.2) 0 评论 平台: CentOS 类型: 虚拟机镜像 软件包: r-3.2.3 rstudio-server ...

  10. BZOJ 4541: [Hnoi2016]矿区 平面图转对偶图+DFS树

    4541: [Hnoi2016]矿区 Time Limit: 30 Sec  Memory Limit: 512 MBSubmit: 433  Solved: 182[Submit][Status][ ...