<!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. UVALive 7511 L - Multiplication Table 数学模拟题，暴力

    给定一副表,问其是否合法. 思路:当全部是?的时候,是合法的. 如果不是,那么,就找到一个数字,把它拆成若干个a*b的形式,去判断其它点是否合法即可. 拆分数字的时候,只需要枚举到sqrt(n),因为 ...

  2. .net笔试题一（简答题）

    1. 简述 private. protected. public. internal 修饰符的访问权限答:private : 私有成员, 在类的内部才可以访问. protected : 保护成员,该类 ...

  3. hibernate课程 初探单表映射1-7 hibernate配置文件新建

    hibernate  配置文件新建 1 右键src==>new==>other==>hibernate configuration File==>next==>next= ...

  4. Nobody gives away anything valuable for free.

    Nobody gives away anything valuable for free.没人会给你免费的午餐.

  5. VUE打包发布后无法访问js、css资源

    在vue开发中,本地测试以及测试环境中都没有遇到问题,当发布生产,有虚拟路径时,便出现js.css均报错404: 首先在config的index.js文件中,将assetsPublicPath修改为' ...

  6. eCharts图表（polar极坐标图）

    极坐标图 HTML: <div id="eChart"></div> css: #eChart{ width:500px; height:500px; } ...

  7. Java正则表达式—小应用—简易爬虫

         在上一篇中,学习了正则表达式的四个功能.即匹配.分割.替换.获取. 利用获取功能,可以实现简单的网页爬虫. 4,获取:将字符串中的符合规则的子串取出. 获取功能的操作步骤: 1,将正则表达式 ...

  8. Flash图表控件FusionCharts调整图表百分比大小

    用户可以为图表的宽度和高度设置百分比值,用来替代绝对的像素值. 以百分比的方式调整图表,首先需要更新HTML代码,如下所示: <div id="chartContainer" ...

  9. pysnmp使用

    install yum install python-pysnmp yum install python-pyasn1 or pip install pysnmp pip install pyasn1 ...

  10. javascript模块化---requirejs

    requirejs是异步执行 为什么会出现模块化1.不定什么时候,自己就将全局变量改变了2.函数名的冲突3.依赖关系不好管理如果b.js依赖a.js那么b必须放在a的下面解决的办法1.自执行函数来包装 ...