<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>vue</title>

     <!--

    <script src="vue.js"></script>

    -->

 <script src="https://unpkg.com/vue/dist/vue.js"></script>

 <script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>

</head>

<body> 

<div  id='vm01'>

<!--

<li  v-for="n in evenNumbers">{{n}}</li>

-->

<input @keyup.f1="submit"></input>

</div>

<div id="example-5" class="demo">

  <select v-model="selected">

    <option>A</option>

    <option>B</option>

    <option>C</option>

  </select>

  <span>Selected: {{ selected }}</span>

</div>

<div id="example-2">

  <simple-counter></simple-counter>

  <simple-counter></simple-counter>

  <simple-counter></simple-counter>

</div>

<script>

var data = { counter: 0 }

Vue.component('simple-counter', {

  template: '<button v-on:click="counter += 1">{{ counter }}</button>',

  // 技术上 data 的确是一个函数了，因此 Vue 不会警告，

  // 但是我们返回给每个组件的实例的却引用了同一个data对象

  data: function () {

    return {counter:0}

  }

})

new Vue({

  el: '#example-2'

})

 new Vue({

  el: '#example-5',

  data: {

    selected: null

  }

})

var vm01= new Vue({

    el:"#vm01",

    data:{evenNumbers:[1,2,3,9,10]},

    methods: {

        submit: function(){

            alert(" use key 13 ");

        }

    }

    })

/*

var vm01= new Vue({

    el:"#vm01",

    data:{evenNumbers:[1,2,3,9,10]}

    })

*/

/*

var vm01= new Vue({

    el:"#vm01",

    data:{numbers:[1,2,3,9]},

    computed:

    {

        evenNumbers: function () {

        return this.numbers.filter(function (number) {

                //return number % 2 === 0

                return number 

           })

        }

    }

})

*/

</script>

</body>

</html>

vuejs v-model的更多相关文章

  1. 什么是V模型？使用SDLC和STLC学习案例研究

    本教程详细介绍了软件/系统开发生命周期(SDLC),如瀑布循环和迭代循环,如RAID和Agile.此外,它继续解释测试的V模型和STLC(软件测试生命周期). 假设为您分配了一项任务,即为客户开发自定 ...

  2. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_04-vuejs研究-vuejs基础-v-model指令

    <!DOCTYPE html> <html lang="en" xmlns:v‐on="http://www.w3.org/1999/xhtml&quo ...

  3. 不可错过的效能利器「GitHub 热点速览 v.22.39」

    如果你是一名前端工程师且维护着多个网站,不妨试试本周榜上有名的 HTML-first 的 Qwik,提升网站访问速度只用一招.除了提升网站加载速度的 Qwik,本周周榜上榜的 Whisper 也是一个 ...

  4. Building the Testing Pipeline

    This essay is a part of my knowledge sharing session slides which are shared for development and qua ...

  5. vue.js初级入门之最基础的双向绑定操作

    首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jquery) 引用的时候需要注意文件的路径,准备工作这样基本就完成了,下面正式开始入门. vue. ...

  6. opengles 矩阵计算

    总的变换矩阵: matrix = projection * view * model 模型矩阵: modelMatrix=translateMatrix * scaleMatrix * rotateM ...

  7. 七天学会ASP.NET MVC (五)——Layout页面使用和用户角色管理

    系列文章 七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC 七天学会ASP.NET MVC (二)——ASP.NET MVC 数据传递 七天学会ASP.NET MVC (三)— ...

  8. backbone学习总结（二）

    今天来看下backbone的路由控制的功能.其实个人感觉backbone,模块就那么几个,熟悉它的框架结构,以及组成,就差不多. 废话不多说,我们来看看还剩下的功能. 关于路由和历史管理 通过 Bac ...

  9. yii2框架增删改查案例

    //解除绑定蓝牙 //http://www.520m.com.cn/api/pet/remove-binding?healthy_id=72&pet_id=100477&access- ...

  10. backbone学习总结（一）

    入职第三天,新公司项目用到backbone+underscore+require等框架,前两天把项目的开发环境都配置好啦,项目也能跑起来,现在准备好好学习公司自己的框架以及用到的框架,有点想吐槽,开发 ...

随机推荐

  1. poj_1952最大下降子序列，统计个数

    其实不算难的一道题,但憋了我好久,嗯,很爽. #include<iostream> #include<cstdio> #include<string.h> #inc ...

  2. linux 挂载存储步骤（以emc 5300为例）

    挂载存储有两种方式:光纤模式(hub卡)和iscsi (以太网).两者大体思路是一样的. 1.在应用服务器上安装hub卡,连接光纤到光纤交换机上: 2.在应用服务器安装hub卡驱动程序: 3.在存储上 ...

  3. 【转】Android 服务器之SFTP服务器上传下载功能 -- 不错

    原文网址:http://blog.csdn.net/tanghua0809/article/details/47056327 本文主要是讲解Android服务器之SFTP服务器的上传下载功能,也是对之 ...

  4. [JZOJ 5885] [NOIP2018模拟9.27] 物理实验 解题报告 （思维）

    题目链接: https://jzoj.net/senior/#main/show/5885 题目: 题解: 把$a$数组按升序排序 我们可以枚举$x$,发现对于任意$x$,最优情况下$y$一定等于$x ...

  5. 忽略PyCharm4中特定的警告提示信息

    有一种简单的方式忽略PyCharm4中的警告,光标放在下划线上,a. 等灯泡出现,点击灯泡或者b. 按下Alt和Enter键,选择'Ignore errors like this'. 或者,在设置里更 ...

  6. H5中 input消除默认，取消在手机上的点击高亮效果

    input消除默认,代码如下    input{             -webkit-tap-highlight-color: rgba(255, 255, 255, 0);            ...

  7. 对同层数据进行处理，做成树状图形式的数据结构，并符合elementui中的tree结构

    //通过子级的pid找到父级对应的id,制作树状图 var data = [ { id: 1, name: "办公管理", pid: 0 }, { id: 2, name: &qu ...

  8. WPF Toolkit AutoCompleteBox 实体类绑定 关键字自定义关联搜索匹配

    原文:WPF Toolkit AutoCompleteBox 实体类绑定 关键字自定义关联搜索匹配 WPF Toolkit AutoCompleteBox 实体类绑定 关键字自定义关联搜索匹配 网上的 ...

  9. 在Windows Server 2008 R2中删除网桥

    How to remove a network bridge in Windows Server 2008 R2 症状: 删除网桥的时候,按理说应该在“网络连接”中选择要被删除的网桥,右键点击,然后选 ...

  10. 11.Laravel5学习笔记：扩展 Validator 类

    简单介绍 在 Laravel5 中,本身已经提供了丰富的验证规则供我们使用,可是天下应用奇葩多,做为程序猿你会发现永远都有新的验证规则诞生,光是组合已经解救不了你的项目了.这个时候就须要我们扩展 Va ...