<!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. WPF combobox数据绑定和数据获取

    本文章仅为个人学习,如有错误之处请指正. 搭建WPF界面的时候,想用combobox构建一个下拉菜单,搜索的时候看到大多数都是大段代码,逻辑顺序不是很详细,摸索了大概,记录一下方便来者. 拖入comb ...

  2. HTML引入JS、CSS的各种方法

    直接上代码,相信大家是看得懂的,最好的办法是把代码粘过去,自己修改试试,看看效果! 上面是刚开始的执行效果,相应的html,js,css展示如下: index.html <!DOCTYPE ht ...

  3. 数据结构与算法-Python/C（目录）

    第一篇 基本概念 01 什么是数据结构 02 什么是算法 03 应用实例-最大子列和问题 第二篇 线性结构 01 线性表及其实现 02 堆栈 03 队列 04 应用实例-多项式加法运算 05 小白专场 ...

  4. SpringBoot系列之@PropertySource用法简介

    SpringBoot系列之@PropertySource用法简介 继上篇博客:SpringBoot系列之@Value和@ConfigurationProperties用法对比之后,本博客继续介绍一下@ ...

  5. 在C#中使用Panel控件实现在一个窗体中嵌套另一个窗体

    在C#中使用Panel控件实现在一个窗体中嵌套另一个窗体 在C#中使用Panel控件实现在一个窗体中嵌套另一个窗体ShowAllPage sAllPage = new ShowAllPage();   ...

  6. 故事 1：.net程序员成长经历

    我呢,是一名.NET程序员,在学校学的.NET和Java,在学校(校企合作)学了一年半的.NET方向的技术,后来觉得java也挺好的,又跑去学习Java,虽然学的很少,但是还是很希望能学好Java,所 ...

  7. hello tensorflow，我的第一个tensorflow程序

    上代码: import tensorflow as tf if __name__=='__main__': g = tf.Graph() # add ops to the user created g ...

  8. Java关键字之abstract、final、static用法

    abstract:即抽象的,可以修饰类.方法: 修饰类:当有一个方法为抽象方法时,这个类就是抽象类,抽象类不能被new,它是一个不完整的类. 修饰方法:这个方法就是抽象的,即只能方法的定义,没有方法的 ...

  9. QML::基本属性类型

    QML基本属性类型

  10. JavaScript初探 五

    JavaScript 初探 七 JavaScript 数据类型 基本的值类型 字符串(String) 数 字(Number) 布尔值(Boolean) 对 象(Object) 函 数(Function ...