<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        <div id="div2" v-bind:style="mystyle">

                <section>

                    <h1>{{title}}</h1>

                        <table>

                            <tr>

                                <th>id</th>

                                <th>姓名</th>

                                <th>性别</th>

                            </tr>

                            <tr v-for="person in persons">

                                <td>{{person.id}}</td>

                                <td>{{person.name}}</td>

                                <td>{{person.sex}}</td>

                                <td>

                                <a href="#" @click="remove(person.id)">删除</a>

                                </td>

                            </tr>

                        </table>

                    </section>

                    <button @click="changeStyle"> 变色</button>

                    <div><input  v-model.number="person.id" ></div>

        <div><input  v-model.number="person.name" ></div>

        <div><input  v-model.number="person.age"></div>

            <button @click="submit">提交</button>

        </div>

        <script src="css/vues.js"></script>

        <script>

            var vm=new Vue({

                el:"#div2",

                data:{

                    title:'渲染数据',

                    persons:[{

                        name:'张三',

                        sex:'男',

                        id:18

                    },

                    {

                        name:'李四',

                        sex:'男',

                        id:22

                    },

                    {

                        name:'李四',

                        sex:'男',

                        id:22

                    },

                    {

                        name:'王五',

                        sex:'女',

                        id:38

                    },

                    ],

                    mystyle:"color:red",

                    person:{id:0,name:"",sex:0}

                },

                methods:{

                    changeStyle:function(){

                        var colors=["green","red","yellow"];

                        var randColor=colors[Math.floor(Math.random()*colors.length)];

                        this.mystyle="color:"+randColor;

                    },

                    submit:function(){

                            this.persons.push({

                            id:this.person.id,

                            name:this.person.name,

                            sex:this.person.sex,

                            });

                            console.log(this.persons);

                    },

                    remove:function(id){

                        this.persons=this.persons.filter((b) => b.id != id);

                    }

                },

                watch:{

                    id:function(n,o){

                        console.log(`修改后n:${n} 修改 o:${o}`)

                    }

                },

                computed:{

                    revMsg:function(){

                        return this.msg.split("").reverse().join("");

                    }

                }

            });

        </script>

    </body>

</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. java语言编程使用正则表达式来实现提取（美团 3-5年经验 15-30k 北京 hadoop高级工程）中的3-5和15-30

    不多说,直接上干货! 如有这样的一条数据进来:   美团 3-5年经验 15-30k 北京 hadoop高级工程 //正则表达式提取工资值,因为15-30k后面有k,3-5年经验,不干净 public ...

  2. unity消息队列

    解决一些当一些消息事件需要处理时,但是 相应的系统还没有初始化来解决的问题 每个系统执行层也有一个消息队列,这样系统没有做好初始化,不执行就好了. 参考:http://blog.csdn.net/ws ...

  3. CentOS 6.5 安装MySQL数据库

    CentOS 6.5 安装MySQL数据库 [root@seeker~]# yum -y install mysql-server //安装命令 [root@seeker~]# service mys ...

  4. nyoj 546——Divideing Jewels——————【dp、多重背包板子题】

    Divideing Jewels 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 Mary and Rose own a collection of jewells. ...

  5. HDU 1166——敌兵布阵——————【线段树单点增减、区间求和】

    敌兵布阵 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Status  ...

  6. 【Openvpn】iOS OpenVPN客户端设置指南（适用iPhone/iPad）

    适用于iPhone/iPad/这些iOS设备.之前iOS使用OpenVPN是需要越狱的,并且是付费第三方应用. 去年开始OpenVPN官方推出了iOS客户端就好用多了,免费也无需越狱. 说明:如果是新 ...

  7. 深入理解JavaScript系列（25）：设计模式之单例模式

    介绍 从本章开始,我们会逐步介绍在JavaScript里使用的各种设计模式实现,在这里我不会过多地介绍模式本身的理论,而只会关注实现.OK,正式开始. 在传统开发工程师眼里,单例就是保证一个类只有一个 ...

  8. SpringSecurity 3.2入门（4）登录密码加密

    密码admin 进行MD5 32位加密为21232F297A57A5A743894A0E4A801FC3 增加spring-security.xml文件配置如下 <!-- 认证管理器,配置Spr ...

  9. Linux.net && mono

    资料: http://www.cnblogs.com/xiaodiejinghong/archive/2013/04/01/2994216.html http://www.cnblogs.com/sh ...

  10. 关于EF执行返回表的存储过程

    1.关于EF执行返回表的存储过程 不知道为什么EF生成的存储过程方法会报错,以下方法可以使用,call是MySQL执行存储过程的命令 [HttpGet] public HttpResponseMess ...