博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【vue 权威指南】 学习笔记 二
阅读量:5262 次
发布时间:2019-06-14

本文共 1029 字,大约阅读时间需要 3 分钟。

1.指令

1.1内部指令

基础指令:v-show , v-else , v-model , v-repeat , v-for , v-text , v-el , v-html , v-on , v-bind , v-ref , v-pre , v-cloak , v-if

1.1 v-if

根据表达式的值在DOM中生成或者移除一个元素。v-if 赋值为false,对应的元素会从DOM中移除,否则对应元素的一个克隆将会被重新插入DOM中,如果切换多个元素,则可以把<template>元素当成包装元素,并在其上使用v-if,最终的渲染结果不会包含它。

1.2 v-show

根据表达式的值来显示或者隐藏HTML元素,当v-show的值为false ,元素被隐藏,DOM上有内联样式,style="display:none", v-show 不支持 <template> 语法

注意:一般v-if 有更高的切换消耗,v-show有更高的初始渲染消耗,因此,如果频繁切换,则使用v-show交换,如果在运行时条件不大可能改变,则使用v-if较好

1.3 v-else

必须跟着v-if 或者v-show,v-show 后有else 会出现 优先级的问题,所有不要在其后用v-else ,用一个v-show 代替

1.4 v-model

用来用在input,textarea,text,checkbox,raido等表单控件元素上创建双向数据绑定。根据控件类型v-model自动选取正确的方法更新元素。

v-model 指令后面可以添加多个参数(number, lazy, debounce)

  • number
    如果用户想将用户的输入自动转换为number类型(如果原值的转换结果为NaN,则返回原值),则可以添加一个number特性
  • lazy
    将数据改在change事件中发生
 {
{msg}} //msg 是在change事件后才改变的
  • debounce
    设置一个最小的延时,在每次敲击之后延时同步输入框的值和数据,如果每次更新都要进行高耗操作(例如在input中输入内容时要发送ajax请求),那么它较为有用,
 {
{msg}} //内容在5000ms之后才发生改变

转载于:https://www.cnblogs.com/Running00/p/10546909.html

你可能感兴趣的文章
MVC4.0 利用IActionFilter实现简单的后台操作日志功能
查看>>
脑袋卡在窗子里
查看>>
ruby 中文字符to_json后乱码(unicode)
查看>>
《大道至简》第六章读后感
查看>>
codeforce 597C-Subsequences(dp+树状数组)
查看>>
[android](学习笔记6)为应用程序添加对话框(1)
查看>>
windows下mongodb安装与使用
查看>>
rotate the clock
查看>>
bugku 变量
查看>>
Python 环境傻瓜式搭建 :Anaconda概述
查看>>
趁热打铁第一季《移动APP开发使用什么样的原型设计工具比较合适?》
查看>>
数据库01 /Mysql初识以及基本命令操作
查看>>
数据库02 /MySQL基础数据类型以及多表之间建立联系
查看>>
Python并发编程04/多线程
查看>>
CF461B Appleman and Tree
查看>>
CF219D Choosing Capital for Treeland
查看>>
杂七杂八的小笔记本
查看>>
51Nod1353 树
查看>>
CF1215E Marbles
查看>>
.net Core 图片验证码 基于SkiaSharp实现
查看>>