好资源导航 » 文章资讯 » 深入理解Vue 的条件渲染和列表渲染

深入理解Vue 的条件渲染和列表渲染

2023-09-25 11:30:05 64

这两天学习了Vue.js感觉条件渲染和列表渲染知识点挺多的，而且很重要，所以，今天添加一点小笔记。

条件渲染

v-if

在

那么在上面的代码中切换loginType将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，不会被替换掉——仅仅是替换了它的placeholder。

复制上面的代码，在自己的浏览器中试一试。

有时候我们不希望浏览器保留我们输入的内容，所以Vue为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的key属性即可：


Username




Email

v-show

另一个用于根据条件展示元素的选项是v-show指令。用法大致一样：

Hello!

不同的是带有v-show的元素始终会被渲染并保留在DOM中。v-show是简单地切换元素的CSS属性display。

渲染如下

列表渲染

使用v-for把一个数组对应为一组元素

我们用v-for指令根据一组数组的选项列表进行渲染。v-for指令需要以iteminitems形式的特殊语法，items是源数据数组并且item是数组元素迭代的别名。



{{item.text}}

渲染结果



eat
play
game

v-for还支持一个可选的第二个参数为当前项的索引。



{{index}}-{{item.text}}

结果

0-eat
1-paly
2-game

一个对象的v-for

你也可以用v-for通过一个对象的属性来迭代。



{{value}}

结果

PureView
一个安静的美男子
18

你一共可以提供三个参数，第二个参数为键名，第三个为索引：

{{index+1}}.{{key}}:{{value}}

结果

1.firstname:PureView
2.lastname:一个安静的美男子
3.age:18

数组更新检测

变异方法

Vue包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

例如



{{item.text}}

重塑数组

变异方法(mutationmethod)，顾名思义，会改变被这些方法调用的原始数组。相比之下，也有非变异(non-mutatingmethod)方法，例如：filter(),concat()和slice()。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：

data:{
items:[
{text:"eat"},
{text:"play"},
{text:"game"},
{text:"gaming"},
{text:"wot"},
{text:"wows"},
{text:"wt"}
]
}
}
exp.items.slice(0,5)

利用上一节的例子,返回的值不会改变原数据，在控制台打印我们就能看到了。

注意事项

由于JavaScript的限制，Vue不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem]=newValue
当你修改数组的长度时，例如：vm.items.length=newLength

为了解决第一类问题，以下两种方式都可以实现和vm.items[indexOfItem]=newValue相同的效果，同时也将触发状态更新：

//Vue.set
Vue.set(exp.items,indexOfItem,newValue)

//Array.prototype.splice
exp.items.splice(indexOfItem,1,newValue)

为了解决第二类问题，你可以使用splice：

exp.items.splice(newLength)

对象更新检测

由于现代JavaScript的限制，Vue无法检测属性添加或删除。例如：

varexp=newVue({
data:{
a:1
}
})
vm.b=2//模板内无响应

Vue是不允许动态地向已创建的实例添加新的根级属性的。这时候Vue提供了一个方法用来对对象添加属性：

Vue.set(object,key,value)

举个例子

varexp=newVue({
el:".exp",
data:{
obj:{
me:"pureview",
pet1:"dog",
pet2:"cat",
hobby:"games"
}
}
})

我们在控制台输入下面的代码，就可以看到模板内的数据进行了更新

Vue.set(exp.obj,"todo","eating")

除了添加属性，我们也可以进行删除操作

Vue.delete(exp.obj,"pet2")

显示过滤/排序结果

有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。

比如我们在一个数组中取其偶数



{{n}}

模板显示结果：

2
4
6
8
10

在计算属性不适用的情况下(例如，在嵌套v-for循环中)你可以使用一个method方法：



{{n}}

结果是一样的

一段取值范围的v-for

v-for也可以取整数。在这种情况下，它将重复多次模板。


{{n}}

结果

12345678910

v-for在

深入理解Vue 的条件渲染和列表渲染

Title

随机推荐

深入理解Vue 的条件渲染和列表渲染

Title

热门推荐

随机推荐