文档章节

vue指令

o
 osc_wws45aot
发布于 2019/08/21 13:13
字数 786
阅读 11
收藏 0

精选30+云产品,助力企业轻松上云!>>>

vue:

vue里面为我们提供的常用的指令主要有一下一些

v-text

v-html

v-if

v-show

v-else

v-for

v-on

v-bind

v-model

v-pre

v-cloak

v-once

下面将一些常用的指令以分组的形式分别结合demo来进行解释

1.v-text,v-html

第一个绑定文本    第二个绑定html

使用{{name}}  就是v-text的缩写

注意如果标签没有text属性该绑定失效  比如你在一个文本框上使用v-text是没有效果的

由此得到的效果可以看出v-html绑定后会覆盖此标签内容(比如上面的“年龄:”)   记住此处是覆盖而非

append

  1. 注意v-text和v-html绑定都是单向的,只能从Model到View的绑定,不能实现View到Model的更新。

 

2.v-model指令

v-model上面有介绍它的双向绑定功能,对于v-model指令,vue限定只能对表单控件进行绑定,常见的有<input>、<select>、<textarea>等。

 3.v-if和v-else指令

是一对好兄弟   需要说的是  v-if可以单独使用但是v-else的前面必须要有一个v-if的条件或者v-show指令  这个和我们的编程原理是一样的

4.v-show指令

是否显示该元素如果值是false对应的Dom标签还是会渲染到页面上面   只是将该标签的css属性display设为none而已而如果你用v-if值,bool值为false的时候整个dom树都不被渲染到页面上面。从这点上来说看,如果你的需求是需要经常切换元素的显示和隐藏,使用v-show效率更高,而如果你只做一次条件判断,使用v-if更加合适。

v-show还常和v-else一起使用,表示如果v-show条件满足,则显示当前标签,否则显示v-else标签。

5.v-for 指令需要以 item in items 形式的特殊语法。常用来绑定数据对象。

除了基础数据之外,还支持Json数组的绑定。

在v-for里面,可以使用<template> 标签来渲染多个元素块,下面就基于bootstrap样式使用v-for、v-if、v-else等实现一个简单的demo。

6v-once

v-once表示只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过

只要使用v-once指令的,View和Model之间除了初次渲染同步,之后便不再同步,而同一次绑定里面没使用v-once指令的还是会继续同步。

7.v-bind

对于html标签的text、value等属性,Vue里面提供了v-text、v-model去绑定。但是对于除此之外的其他属性呢,这就要用到接下来要讲的v-bind指令了。博主的理解是v-bind的作用是绑定除了text、value之外的其他html标签属性,常见的比如class、style、自定义标签的自定义属性等

8v-on

对于时间的监听和绑定,jquery里面最常用的就是on了。同样,在Vue里面,v-on指令用来绑定标签的事件,其语法和v-bind基本类似。

 

下一篇: vue事件
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

告别传统机房:3D 机房数据可视化实现智能化与VR技术的新碰撞

前言 随着各行业对计算机依赖性的日益提高,计算机信息系统的发展使得作为其网络设备、主机服务器、数据存储设备、网络安全设备等核心设备存放地的计算机机房日益显现出它的重要地位,而机房...

xhload3d
昨天
13
0
如何使用.css()应用!important? - How to apply !important using .css()?

问题: I am having trouble applying a style that is !important . 我在应用!important样式时遇到麻烦。 I've tried: 我试过了: $("#elem").css("width", "100px !important"); This doe......

富含淀粉
昨天
5
0
spring源码解析-xml配置文件读取

整个 XML配置文件读取的大致流程如下: 通过继承自AbstractBeanDefinitionReader中的方法,来使用ResourLoader将资源文件路径转换为对应的Resource文件(读取资源文件并将其转为Resource) ...

wc_飞豆
昨天
16
0
salesforce community cloud 1

NO.1 Universal Containers has a Community for their partners. They would like to add a new partner company and grant their users access to the Community. What is the first step ......

jinzongyu
昨天
11
0
如何使用PHP计算两个日期之间的差异? - How to calculate the difference between two dates using PHP?

问题: I have two dates of the form: 我有两个日期格式: Start Date: 2007-03-24 End Date: 2009-06-26 Now I need to find the difference between these two in the following form:......

技术盛宴
昨天
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部