本文为博主原创，未经允许不得转载：

<!DOCTYPE html>

<html lang="zh">

<head>

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

    </head>

    <body>

        <div id="example-4">

            <!--用HTML模板做双向数据绑定-->

            {{value}}

            <input type="text" v-model.trim="value" />

            <!--

                其中trim为事件修饰符，去除空格。

                v-model.number修饰符为转换为number格式数据

            -->

        </div>

        <script>

            //vue指令语法 v-指令名字+:+指令的参数=指令的表达式

            new Vue({
　　　　　　　　　　 /* el:用于绑定属性的元素 */

                  el: '#example-4',
　　　　　　　　　　//data 用于定义属性，　　
　　　　　　　　　　data: { value:"liuluwei" } 
　　　　　　　　}) 

　　</script>

 </body> 

</html>

Vue学习二：v-model指令使用方法的更多相关文章

  1. Vue学习五：v-for指令使用方法

    本文为博主原创,未经允许不得转载: <!DOCTYPE html> <html lang="zh"> <head> <meta http- ...

  2. vue学习(二) 三个指令v-cloak v-text v-html

    //style <style> [v-cloak]{ display:none } </style> //html <div id="app"> ...

  3. day 82 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  4. day 81 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  5. Vue学习之路5-v-model指令

    1. 指令释义 v-model在表单控件或者组件上创建双向绑定,本质上是负责监听用户的输入事件(onchange,onkeyup,onkeydown等,具体是哪个,还请查阅官方底层实现文档)以更新数据 ...

  6. Vue学习之路4-v-bind指令

    1. 定义 1.1 v-bind 指令被用来响应地更新 HTML 属性,其实它是支持一个单一 JavaScript 表达式 (v-for 除外). 2. 语法 2.1 完整语法:<span v- ...

  7. Vue学习系列(三)——基本指令

    前言 在上一篇中,我们已经对组件有了更加进一步的认识,从组件的创建构造器到组件的组成,进而到组件的使用,.从组件的基本使用.组件属性,以及自定义事件实现父子通讯和巧妙运用插槽slot分发内容,进一步的 ...

  8. vue学习-day02（自定义指令，生命周期）

    目录: 1.案例:品牌管理    2.Vue-devtools的两种安装方式    3.过滤器,自定义全局或私有过滤器    4.鼠标按键事件的修饰符    5.自定义全局指令:让文本框获取焦点   ...

  9. Vue学习之路8-v-on指令学习简单事件绑定之属性

    前言 上一篇文章以v-on指令绑定click事件为例介绍了v-on指令的使用方法,本文介绍一下v-on绑定事件的一些属性的使用方法. v-on绑定指令属性 .stop属性 阻止单击事件继续向上传播(简 ...

随机推荐

  1. 【2017-04-17】类库、通用变量、is和as、委托

    类库dll文件,里边有很多被编译后的C#代码,不可阅读,不可修改,只能调用 1.类库创建 新建项目为类库,类库文件编写完成后,选择生成—生成解决方案,在debug文件夹下找到dll文件 2.类库引用 ...

  2. 爬取小说 spider

    1.代码: # -*- coding:UTF- -*- from bs4 import BeautifulSoup import requests, sys """ 类说 ...

  3. Xfire基础

    XFire 是与Axis 2并列的新一代Web Service框架,通过提供简单的API支持Web Service各项标准协议,能够快速地开发Web Service应用.和其他Web服务引擎相比,XF ...

  4. 英文名为什么最好不用joe？JOE英文名的寓意是什么？

    英文名为什么最好不用joe?JOE英文名的寓意是什么? Joe 的意思是乔,人名.意为,上帝还会赐予 Joe 乔(男子名, 对不相识者非正式的称呼; Joseph的昵称)(=GIJoe)[美俚]美国兵 ...

  5. Chrome表单自动填充如何取消(暂时可行的解决办法)

    做项目时一直遇到一个问题,那就是用chrome测试的时候页面上的表单一直会自动填充,并且伴有黄色的背景颜色,有时候感觉很方便,有时候又很想去掉. 之前也多次寻找过方法,但是网上的方法都差不多,很多都是 ...

  6. Lonsdor K518ISE free update news on what makes and year can work

    Lonsdor K518ISE engineers recently tested a number of cars and verified working great, below are tes ...

  7. 第一周java测验感想

     在正式开学的第一周,建民老师就给我们来了一个下马威.我本身的编程基础比较差,不知道怎么去想,怎么去一步步的去完成这么一个工程.所以我在星期四的下午十分的痛苦…因为不知道怎么搞嘛.尽管在暑假的时候看了 ...

  8. 实用的 图片上传 html+css

    html <form id="mainForm"> <div class="content"> <div class=" ...

  9. TF-IDF基本原理

    1.TF-IDF介绍 TF/IDF(term frequency–inverse document frequency)用以评估字词 对于一个文件集其中一份文件的重要程度.字词的重要性随着它在文件中出 ...

  10. scrapy 下载图片 from cuiqingcai

    import scrapy class MzituScrapyItem(scrapy.Item): # define the fields for your item here like: # nam ...