<!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. （Frontend Newbie）Web三要素（二）

    上一篇简单介绍了HTML的基本知识以及一些在开发学习过程中容易忽视的知识点,本篇介绍Web三要素中另一个重要组成部分----层叠样式表(Cascading Style Sheets). CSS 按照一 ...

  2. Bootstrap 斜体、文本对齐、缩略图、地址、列表等

    目录1.标题2.页面主体3.强调    a.小号文本    b.着重    c.斜体    d.对齐class    e.强调class4.缩略语5.地址6.列表    a.无序列表    b.有序列 ...

  3. 调用sqlserver中的存储过程

    1.存储过程名 string strSQL = "usp_GetUnReturnPassports"; 2.创建数据库对象 database Database db = Datab ...

  4. 如何取得GridView被隐藏列的值

    如何取得GridView被隐藏列的值         分类:             ASP.net              2009-06-25 12:47     943人阅读     评论(1 ...

  5. Dozer 实现对象间属性复制

    使用场景:两个领域之间对象转换. 比如:在系统分层解耦过程中, 对外facade接口,一般使用VO对象,而内core业务逻辑层或者数据层通常使用Entity实体. VO对象 package com.m ...

  6. 文章点赞功能（Ajax）

    一.文章点赞样式构建 1.将base.html的css样式改为外部引入 将base.html的内嵌样式删除,改为使用 HTML 头部的 <head> 标签对中使用<link>标 ...

  7. jQuery之检测分析纠错------地狱的镰刀

    1. 答: 或者: $(selector).eq(0).hide(); 解答:get() 方法获得由选择器指定的 DOM 元素. 2. 答: 3, 答1: 答2: 4. slideDown()方法格式 ...

  8. ViewPager+fragment的使用

    如图我在一个继承FragmentActivity的类中嵌套了3个fragment分别能实现3个不同的界面,默认展现第一个,在第一个的fragment中有个ViewPager在ViewPager中嵌套了 ...

  9. log4j2简单使用

    http://www.cnblogs.com/lzb1096101803/p/5796849.html 如果是基于的slf4j,看这篇文章去配置 http://blog.csdn.net/neosmi ...

  10. 基于alpine定制常用命令镜像

    FROM alpine RUN apk update RUN apk add curl coreutils 像busybox.alpine镜像date命令都不是完整版的,不能执行加减的操作(date ...