<!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. JNA-调用win32 Dll文件

    1. 描述备注 参考地址1 JNA示例代码 1.1 JNA工作原理 JNA是建立在JNI技术基础之上的一个Java类库,它使您可以方便地使用java直接访问动态链接库中的函数. 原来使用JNI,你必须 ...

  2. 这个五月，我拿到了腾讯暑期offer

    前情回顾 本来学校就是双非,如果再没有些亮点,是很难进大厂的. 我比较幸运,曾在网易实习过一段时间,很感谢这段经历,让我有幸通过腾讯HR们的简历筛选. 对于腾讯春招,其实我是没有参加网申(2.28-3 ...

  3. 提高jquery加载速率（有cdn就加载，没有就加载本地）

    <!-- Adds google cdn reference --> <script src="https://cdn.bootcss.com/jquery/3.2.1/j ...

  4. path的join和resolve

    连接路径:path.join([path1][, path2][, ...]) path.join()方法可以连接任意多个路径字符串.要连接的多个路径可做为参数传入. path.join()方法在接边 ...

  5. JSON.parse() 和 JSON.stringify()的简单介绍

    参考地址: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse ht ...

  6. 初识ListView - 定制ListView - 提升ListView运行效率

    ListView绝对可以称得上是 Android 中最常用的控件之一,几乎所有的应用程序都会用到它.由于手机屏幕空间都比较有限,能够一次性在屏幕上显示的内容并不多,当我们的程序中有大量的数据需要展示的 ...

  7. 调用cmd命令行命令（借鉴）

    留待以后观看 ———————————————————————————————————————————————————————————————————————————— public class IP_ ...

  8. LeetCode Move Zeroes （简单题）

    题意: 给定一个整型数组nums,要求将其中所有的0移动到末尾,并维护所有非0整数的相对位置不变. 思路: 扫一遍,两个指针维护0与非0的交界,将非0的数向前赋值就行了. C++ class Solu ...

  9. 8. String to Integer

    Implement atoi to convert a string to an integer. Hint: Carefully consider all possible input cases. ...

  10. 【BZOJ1857】传送带（分治经典：三分套三分）

    点此看题面 大致题意: 一个二维平面上有两条传送带\(AB\)和\(CD\),\(AB\)传送带的移动速度为\(P\),\(CD\)传送带的移动速度为\(Q\),步行速度为\(R\),问你从\(A\) ...