<!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. (转)DB2中的一些函数

    DB2中的一些函数 原文:https://www.cnblogs.com/ShaYeBlog/archive/2012/08/27/2658025.html 最近用DB2,数据库之间的差异还是很大的, ...

  2. vue懒加载 && 浏览器高度

    当我们进入首页时,可能有很多条目需要显示,但是如果条目太多,我们全部将之显示出来就会造成性能的消耗,比如,我在第一条就找到了需要的或者我就看前面两条我就不想看后面的了,所以,这时候如果使用全部加载的方 ...

  3. Charts in Ionic

    Chart对于任何应用来说都是不可或缺的一部分,hybrid app也是如此. 先罗列一下有哪些可用的Chart library: D3.JS -- Data-Driven Documents,BSD ...

  4. Android IntentFilter 匹配原则浅析

    1 Intent分为两大类,显式和隐式. 显式事件,就是指通过 component Name 属性,明确指定了目标组件的事件. 比如我们新建一个Intent,指名道姓的说,此事件用于启动名为" ...

  5. postgres formencode.api.Invalid

    错误提示: Invalid: expected an int in the IntCol 'geom', got <type 'str'> '010100000007EBFFFC3A611 ...

  6. 开源TSDB简介--Druid

    开源TSDB简介--Druid Druid是一个以Java编写的开源分布式列式数据存储. Druid的目标是快速提取大量事件数据,并提供低延迟的查询. 德鲁伊的名字来源于许多角色扮演游戏中的变形德鲁伊 ...

  7. 【Linux相识相知】bash的特性

    命令历史 shell进程会记录用户提交执行过的命令 可以是用history查看: [root@localhost dev]# history ss -tnl ifconfig vi /etc/sysc ...

  8. asp 2.0 ajax triggers 触发更新

  9. 如何优化VMWare虚拟机的运行速度（转）

    虚拟机是个好东西,但是对电脑有一定的要求.尤其对做工控的来说都需要安装一些大型的软件(其中WINCC最难装,对系统要求较高.而且像WIN 7 64位的就别想装上去了,如果改系统后那4G以上的内存不就浪 ...

  10. APNS 证书生成注意事项

    APNS证书导出pem: openssl x509 -in aps_development.cer -inform der -out yourCertName.pem APNS证书密钥导出: 先在&q ...