您当前的位置:首页 >> 云端 >  >> 正文
02.Vue的系统指令(二)|天天时讯
来源: 哔哩哔哩      时间:2023-05-30 08:12:24

前言

本文主要内容:


【资料图】

v-model

v-for

v-if

v-show

v-model:双向数据绑定

重点:双向数据绑定,只能用于表单元素,或者用于自定义组件

之前的文章里,我们通过v-bind,给<input>标签绑定了data对象里的name属性。当data里的name的值发生改变时,<input>标签里的内容会自动更新。

可我现在要做的是:我在<input>标签里修改内容,要求data里的name的值自动更新。从而实现双向数据绑定。该怎么做呢?这就可以利用v-model这个属性。

区别

v-bind:只能实现数据的单向绑定,从 M 自动绑定到 V。

v-model:只有v-model才能实现双向数据绑定。注意,v-model 后面不需要跟冒号,

注意:v-model 只能运用在表单元素中,或者用于自定义组件。常见的表单元素包括:input(radio, text, address, email....) 、select、checkbox 、textarea。

代码举例如下:

此时,便可实现我们刚刚要求的双向数据绑定的效果。

v-model举例:实现简易计算器

题目:现在两个输入框,用来做加减乘除,将运算的结果放在第三个输入框。

实现代码如下:

注意上方代码中的注释,可以了解下eval()的用法。

Vue中通过属性绑定为元素设置class 类样式

注意,是类样式

引入

我们先来看下面这段代码:

上面的代码中,我们直接通过正常的方式,给<h1>标签设置了两个 class 类的样式。代码抽取如下:

上面的效果,我们还可以用Vue来写。这就引入了本段要讲的方式。

方式一:数组

方式一:直接传递一个数组。注意:这里的 class 需要使用  v-bind 做数据绑定。

代码如下:

代码抽取如下:

上方代码中,注意,数组里写的是字符串;如果不加单引号,就不是字符串了,而是变量。

写法二:在数组中使用三元表达式

上方代码的意思是,通过data中布尔值 flag 来判断:如果 flag 为 true,就给 h1 标签添加my-active样式;否则,就不设置样式。

注意,三元表达式的格式不要写错了。

写法三:在数组中使用 对象 来代替 三元表达式(提高代码的可读性)

上面的写法二,可读性较差。于是有了写法三。

写法三:在数组中使用对象来代替三元表达式

代码如下:

Vue中通过属性绑定为元素设置 style 行内样式

注意,是行内样式(即内联样式)。

写法一

写法一:直接在元素上通过 :style的形式,书写样式对象。

例如:

写法二:将样式对象,定义到 data中,并直接引用到 :style中。

也就是说,把写法一的代码改进一下。代码如下:

写法三

写法二只用到了一组样式。如果想定义多组样式,可以用写法三。

写法三:在 :style中通过数组,引用多个 data上的样式对象。

代码如下:

v-for:for循环的四种使用方式

作用:根据数组中的元素遍历指定模板内容生成内容。

引入

比如说,如果我想给一个ul中的多个li分别赋值1、2、3...。如果不用循环,就要挨个赋值:

效果:

为了实现上面的效果,如果我用v-for进行赋值,代码就简洁很多了:

接下来,我们详细讲一下v-for的用法。需要声明的是,Vue 1.0的写法和Vue 2.0的写法是不一样的。本文全部采用Vue 2.0的写法。

方式一:普通数组的遍历

针对下面这样的数组:

将数组中的赋给li:

将数组中的值和index赋给li:

效果如下:

方式二:对象数组的遍历

效果如下:

方式三:对象的遍历

针对下面这样的对象:

将上面的obj1对象的数据赋值给li,写法如下:

效果如下:

方式四:遍历数字

in后面还可以直接放数字。举例如下:

效果如下:

v-for中key的使用注意事项

注意:在 Vue 2.2.0+ 版本里,当在组件中使用 v-for 时,key 属性是必须要加上的。

这样做是因为:每次 for 循环的时候,通过指定 key 来标示当前循环这一项的唯一身份

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用 “就地复用” 策略。如果数据项的顺序被改变,Vue将不是移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。

为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。

key的类型只能是:string/number,而且要通过 v-bind 来指定。

代码举例:

v-if:设置元素的显示和隐藏(添加/删除DOM元素)

作用:根据表达式的值的真假条件,来决定是否渲染元素,如果为false则不渲染(达到隐藏元素的目的),如果为true则渲染。

在切换时,元素和它的数据绑定会被销毁并重建。

举例如下:(点击按钮时,切换和隐藏盒子)

效果如下:

v-show:设置元素的显示和隐藏(在元素上添加/移除style="display:none"属性)

作用:根据表达式的真假条件,来切换元素的 display 属性。如果为false,则在元素上添加 display:none属性;否则移除display:none属性。

举例如下:(点击按钮时,切换和隐藏盒子)

我们直接把上一段代码中的v-if改成v-show就可以了:

效果如下:

v-if和v-show的区别

v-ifv-show都能够实现对一个元素的隐藏和显示操作。

区别:

v-if:每次都会重新添加/删除DOM元素,元素和它的数据绑定会被销毁并重建。

v-show:每次不会重新进行DOM的添加/删除操作,只是在这个元素上添加/移除style="display:none"属性,表示节点的显示和隐藏。

优缺点:

v-if:有较高的切换性能消耗。这个很好理解,毕竟每次都要进行dom的添加/删除操作。

v-show:有较高的初始渲染消耗。也就是说,即使一开始v-show="false",该节点也会被创建,只是隐藏起来了。而v-if="false"的节点,根本就不会被创建。

总结

如果元素涉及到频繁的切换,最好不要使用 v-if, 而是推荐使用 v-show

如果元素可能永远也不会被显示出来被用户看到,则推荐使用 v-if

标签:

X 关闭

X 关闭