您的位置：首页 > 产品设计 > UI/UE

前端框架vue.js系列（2）：条件与循环

2017-09-27 09:48 931 查看

vue条件

通常用于显示与否，使用v-if或v-show实现。v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下， v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于
CSS 进行切换。一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

条件Demo：

<body>
<!-- 结果显示为456 -->
<div id="app">
<h1 v-if="ok==1">123</h1>
<h1 v-else-if="ok==2">456</h1>
<h1 v-else>789</h1>
<h1 v-show="false">hello</h1>
</div>
</body>

<script>
var vue = new Vue({
el: "#app",
data: {
ok: 2
},
methods: {},
filters: {},
computed: {},
watch: {}
});
</script>

vue循环

使用v-for实现，如果条件允许下，尽可能绑定上key作为唯一值,以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，如:key="item.id"。当一个元素标签内同时存在v-for和v-if时，v-for的优先级要高于v-if。v-for循环主要有以下几种情况：

正常循环item in items，其中items为数组。

<li v-for="item in worditems" :key="item.id">{{item.id}}：{{item.v}}</li>

<script>
new Vue({
el: "#app",
data: {
worditems: [{
id: "id1",
v: "a"
}, {
id: "id2",
v: "b"
}]
}
});
</script>

循环加索引(item,index) in items，其中items为数组。

<li v-for="(item,index) in worditems" :key="item.id">{{index}}：{{item.id}}：{{item.v}}</li>

<script>
new Vue({
el: "#app",
data: {
worditems: [{
id: "id1",
v: "a"
}, {
id: "id2",
v: "b"
}]
}
});
</script>

对象循环3种情况：value in object、(value,key) in object、(value,key,index) in object，object为对象。

<li v-for="value in object">{{value}}</li>
<li v-for="(value,key) in object">{{key}}：{{value}}</li>
<li v-for="(value,key,index) in object">{{index}}：{{key}}：{{value}}</li>

<script>
new Vue({
el: "#app",
data: {
object: {
k_a: "v_1",
k_b: "v_2",
k_c: "v_3"
}
}
});
</script>

整数循环n in 5。

<li v-for="n in 5">{{n}}</li>

组件循环，值通过props传递到组件内。

<my-componen v-for="(item,index) in worditems" :key="item.id" :i="index" :v="item.v"></my-componen>

<script type="text/x-template" id="myli">
<li>{{i}}：{{v}}</li>
</script>

<script>
Vue.component("my-componen", {
props: ["i", "v"],
template: "#myli"
});

var vue = new Vue({
el: "#app",
data: {
worditems: [{
id: "id1",
v: "a"
}, {
id: "id2",
v: "b"
}]
}
});
</script>

注意，由于JavaScript 的限制， Vue不能检测以下变动，即改变时不支持同步绑定至界面显示：

1.vm.items[indexOfItem] = newValue。解决办法：可以使用vm.items.splice(indexOfItem, 1, newValue)

2.vm.items.length = newLength。解决办法：直接截取vm.items.splice(newLength)

有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。通过methods添加处理方法,此操作仅限于过滤，不可改变数组内对象的值。

<li v-for="n in even(numbers)">{{n}}</li>

<script>
var vue = new Vue({
el: "#app",
data: {
numbers: [1, 2, 3, 4, 5]
},
methods: {
even: function(numbers) {
return numbers.filter(function(number) {
return number % 2 === 0
})
}
}
});
</script>

如果在循环前你必须改变数组对象的值，请先改变后，在加入到循环表达式中。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： vue 前端框架

相关文章推荐

新的分享

章节导航