1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <div id="div2" v-bind:style="mystyle">
  9.                 <section>
  10.                     <h1>{{title}}</h1>
  11.                         <table>
  12.                             <tr>
  13.                                 <th>id</th>
  14.                                 <th>姓名</th>
  15.                                 <th>性别</th>
  16.                             </tr>
  17.                             <tr v-for="person in persons">
  18.                                 <td>{{person.id}}</td>
  19.                                 <td>{{person.name}}</td>
  20.                                 <td>{{person.sex}}</td>
  21.                                 <td>
  22.                                 <a href="#" @click="remove(person.id)">删除</a>
  23.                                 </td>
  24.                             </tr>
  25.                         </table>
  26.                     </section>
  27.                     <button @click="changeStyle"> 变色</button>
  28.                     <div><input  v-model.number="person.id" ></div>
  29.         <div><input  v-model.number="person.name" ></div>
  30.         <div><input  v-model.number="person.age"></div>
  31.             <button @click="submit">提交</button>
  32.         </div>
  33.         <script src="css/vues.js"></script>
  34.         <script>
  35.             var vm=new Vue({
  36.                 el:"#div2",
  37.                 data:{
  38.                     title:'渲染数据',
  39.                     persons:[{
  40.                         name:'张三',
  41.                         sex:'男',
  42.                         id:18
  43.                     },
  44.                     {
  45.                         name:'李四',
  46.                         sex:'男',
  47.                         id:22
  48.                     },
  49.                     {
  50.                         name:'李四',
  51.                         sex:'男',
  52.                         id:22
  53.                     },
  54.                     {
  55.                         name:'王五',
  56.                         sex:'女',
  57.                         id:38
  58.                     },
  59.                     ],
  60.                     mystyle:"color:red",
  61.                     person:{id:0,name:"",sex:0}
  62.                 },
  63.                 methods:{
  64.                     changeStyle:function(){
  65.                         var colors=["green","red","yellow"];
  66.                         var randColor=colors[Math.floor(Math.random()*colors.length)];
  67.                         this.mystyle="color:"+randColor;
  68.                     },
  69.                     submit:function(){
  70.                             this.persons.push({
  71.                             id:this.person.id,
  72.                             name:this.person.name,
  73.                             sex:this.person.sex,
  74.                             });
  75.                             console.log(this.persons);
  76.                     },
  77.                     remove:function(id){
  78.                         this.persons=this.persons.filter((b) => b.id != id);
  79.                     }
  80.                 },
  81.                 watch:{
  82.                     id:function(n,o){
  83.                         console.log(`修改后n:${n} 修改 o:${o}`)
  84.                     }
  85.                 },
  86.                 computed:{
  87.                     revMsg:function(){
  88.                         return this.msg.split("").reverse().join("");
  89.                     }
  90.                 }
  91.             });
  92.         </script>
  93.     </body>
  94.  
  95. </html>

运行效果：

vue案列的更多相关文章

  1. Spring MVC的配置文件(XML)的几个经典案列

    1.既然是配置文件版的,那配置文件自然是必不可少,且应该会很复杂,那我们就以一个一个的来慢慢分析这些个经典案列吧! 01.实现Controller /* * 控制器 */ public class M ...

  2. js闭包的作用域以及闭包案列的介绍：

    转载▼ 标签: it   js闭包的作用域以及闭包案列的介绍:   首先我们根据前面的介绍来分析js闭包有什么作用,他会给我们编程带来什么好处? 闭包是为了更方便我们在处理js函数的时候会遇到以下的几 ...

  3. SAMSUNG某型号一千短信成功记录！对比其他软件恢复不成功的案列！

    Hello! 大家好欢迎再次来到Dr.wonde的博客, 下面谈一下今天的案列,今年11月26号收到了一客户寄来的三星S4手机恢复里面短信, 如下图所示,用其他软件恢复以后,数据为零,没有恢复,,这下 ...

  4. php知识案列分享

    今天再跟大家分享一下,以下案列. 使用array_flip函数生成随机数,可以去掉重复值. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 < ...

  5. linux下mysql函数的详细案列

    MYSQL * STDCALL mysql_real_connect(MYSQL *mysql, const char *host, const char *user, const char *pas ...

  6. axis1,xfire,jUnit 测试案列+开Web Service开发指南+axis1.jar下载 代码

    axis1,xfire,jUnit 测试案列+Web Service开发指南(中).pdf+axis1.jar下载    代码 项目和资源文档+jar 下载:http://download.csdn. ...

  7. 大数据技术之_14_Oozie学习_Oozie 的简介+Oozie 的功能模块介绍+Oozie 的部署+Oozie 的使用案列

    第1章 Oozie 的简介第2章 Oozie 的功能模块介绍2.1 模块2.2 常用节点第3章 Oozie 的部署3.1 部署 Hadoop(CDH版本的)3.1.1 解压缩 CDH 版本的 hado ...

  8. react 的安装和案列Todolist

    react 的安装和案列Todolist 1.react的安装和环境的配置 首先检查有没有安装node.js和npm node -v npm -v 查看相关版本 2.安装脚手架工具 2.构建:crea ...

  9. SpringCloud断路器(Hystrix)和服务降级案列

    断路器(Hystrix) 为什么需要 Hystrix? 在微服务架构中,我们将业务拆分成一个个的服务,服务与服务之间可以相互调用(RPC).为了保证其高可用,单个服务又必须集群部署.由于网络原因或者自 ...

随机推荐

  1. 单一指责原则（Single Responsibility Principle） SRP

    using System; using System.Collections.Generic; using System.Text; namespace SingleResponsibilityPri ...

  2. Linux分区扩容

    lz在MAC上面使用Linux虚拟机,开始只建了一个分区,挂载在”/”目录下.现在硬盘空间不够了,所以lz就来给这个分区扩容. 首先,当然是要给虚拟机分配更多的硬盘空间喽(lz用的是VMware Fu ...

  3. matlab安装过程的被要求的配置程序

    顺序是这样的: 网址的顺序是这样的: 1. http://cn.mathworks.com/support/compilers/R2015b/index.html?sec=win64&s_ci ...

  4. 九度oj题目1518：反转链表

    题目1518:反转链表 时间限制:1 秒 内存限制:128 兆 特殊判题:否 提交:2567 解决:948 题目描述: 输入一个链表,反转链表后,输出链表的所有元素.(hint : 请务必使用链表) ...

  5. React.js 小书 Lesson17 - 前端应用状态管理 —— 状态提升

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson17 转载请注明出处,保留原文链接和作者信息. 上一个评论功能的案例中,可能会有些同学会对一个 ...

  6. Python快速入门_1

    注释 # 用#号字符开头注释单行 """ 三个引号可以注释多行 三个引号可以注释多行 三个引号可以注释多行 """ 原始数据类型和运算符 ( ...

  7. oracle dblink简介

    database link概述 database link是定义一个数据库到另一个数据库的路径的对象,database link允许你查询远程表及执行远程程序.在任何分布式环境里,database都是 ...

  8. c# 远程连接共享文件

    c# 远程连接共享文件 /// <summary> /// 连接远程共享文件夹 /// </summary> /// <param name="path&quo ...

  9. ThreadPoolExecutor（上篇）

    Java有两个线程池类:ThreadPoolExecutor和ScheduledThreadPoolExecutor,继承AbstractExecutorService类,AbstractExecut ...

  10. java集合框架（一）：HashMap

    有大半年没有写博客了,虽然一直有在看书学习,但现在回过来看读书基本都是一种知识“输入”,很多时候是水过无痕.而知识的“输出”会逼着自己去找出没有掌握或者了解不深刻的东西,你要把一个知识点表达出来,自己 ...