文章目录
vue 渲染
条件渲染
v-if 与 v-else渲染 以及 v-show
v-if 与 v-else 有条件的渲染一块内容, v-if 值选择的时候才加载，多余if不会存在内存中。
v-if和v-else直接控制 DOM 是否被渲染，而v-show则是通过控制 css 的方式来控制 DOM 是否展示。
在v-if中，如果一开始条件为假，则 Vue 什么也不会做，当条件变为真的时候，Vue 才会去渲染这一部分 DOM，当条件再次变为假的时候，与这一块相关的所有内容都会被从 DOM 树中删除掉。
而v-show则要简单的多，它仅仅是通过控制 css 中的 display 来控制 DOM 的显示和隐藏。
<div id="app1">
<p v-if="isTrue"> isTrue 是 true 显示 </p>
<p v-else> isTrue 是 false 显示 </p>
根据 type 值显示 div内容
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
<h4> v-show </h4>
另一个用于根据条件展示元素的选项是 v-show 指令。用法大致与v-if一样：
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。
<p v-show="ishow"> ishow 是 true 显示 </p>
</div>
vue代码
//if else show 条件渲染
var a = new Vue({
el:'#app1',
data: {
//绑定默认css属性
isTrue: false,
ishow: true,
type:'B'
}
});
列表渲染
用 v-for 把一个数组对应为一组元素
遍历对象
v-for 来遍历一个对象的属性。
v-for=“item in items”
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
提供第二个的参数为 property 名称 (也就是键名)：
(value, name) in object
<ul id="example-2">
<li v-for="(item,index) in items">
{{index}} ----- {{ item.message }}
</li>
</ul>
可以用第三个参数作为索引：
(value, name, index) in object
属性值 key 索引
<ul id="example-3">
<li v-for="(value, key, index) in object">
{{index}}---- {{key}} ----- {{ value }}
</li>
</ul>
html 代码
<div id="app2">
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
索引显示
<ul id="example-2">
<li v-for="(item,index) in items">
{{index}} ----- {{ item.message }}
</li>
</ul>
属性值 key 索引
<ul id="example-3">
<li v-for="(value, key, index) in object">
{{index}}---- {{key}} ----- {{ value }}
</li>
</ul>
<h5>过滤数组</h5>
<ul id="example-4">
<li v-for=" n in evenNumbers">
{{ n }}
</li>
</ul>
<h5>v-for 也可以接受整数</h5>
<div>
<span v-for="n in 10">{{ n }} </span>
</div>
<h5>你也可以利用带有 v-for 的 template 来循环渲染一段包含多个元素的内容</h5>
<ul>
<template v-for="item in items">
<li>{{ item.message }}</li>
<li class="divider" role="presentation"> presentation </li>
</template>
</ul>
</div>
vue代码
// for 渲染列表
var a = new Vue({
el:'#app2',
data: {
items: [
{ message: 'Foo1' },
{ message: 'Bar2' },
{ message: 'Bar3' },
{ message: 'Bar4' },
{ message: 'Bar5' },
],
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
},
//排序
numbers: [ 1, 2, 3, 4, 5 ],
},
//计算属性 初始化
computed: {
// 过滤数组
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
});
}
}
});
</script>
vue 数组以及对象更新元素
由于 JavaScript 的限制，Vue 不能检测以下数组的变动：
1 、不能通过用数组下边去对数组元素进行更新
2 、 不能用对象.key 的 去修改对象属性值
Vue 可以检测的变化
可以使用Vue 提供的编译方法，用来返回一个新的数组，并且可以被Vue 检测到然后响应式渲染。
现有数据字段的变化：item[0].isShow = true; 用来表示是否显示此条数据
通过Vue.set(object, key, value)的方式添加的属性
通过Vue.delete(object, Key)的方式删除的属性
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
filter()
concat()
slice()
Vue 无法检测到的变化
利用索引去设置新的数据时：items[indexOfItem] = newItem;
直接修改数组的长度时：items.length = newLength;
直接去添加或删除对象的属性：app.dataSource.newKey = ‘newKey’
<div id="app">
<ul>
<li v-for="(item, index) in items" v-if="item.isShow" :key="index">
<p>{{index}}</p>
<p>{{item.name}}</p>
<p>￥{{item.price}}</p>
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
items: [
{
name: 'android',
price: '12.00',
isShow: false // 用来表示是否显示磁条数据
},
{
name: 'js',
price: '13.00',
isShow: true
}
]
}
});
</script>
