v-if: 按需加载dom,可以减轻服务器的压力。 v-show:dom已加载好,调整css dispaly属性,可以使客户端操作更加流畅。
在computed里新声明了一个对象sortItems,如果不重新声明会污染原来的数据源,这是Vue不允许的,所以你要重新声明一个对象
<ul>
<li v-for="item in sortItems">{{item}}</li>
</ul>
new Vue({
el: '#app',
data: {
items: [54, 32, 12, 23, 11, 45, 2]
},
computed: {
sortItems() {
return this.items.sort()
}
},
methods: {
sortNumber(a,b) {
return a-b;//升序,b-a为降序
}
}
})
http://imweb.io/topic/565cf7253ad940357eb99881 https://hufangyun.com/2017/sort-array/ sort的内部实现 源码https://github.com/v8/v8/blob/master/src/js/array.js#L1653
Google Chrome 对 sort 做了特殊处理 // In-place QuickSort algorithm. // For short (length <= 10) arrays, insertion sort is used for efficiency. 对于长度 <= 10 的数组使用的是插入排序(稳定排序算法) ,>10 的数组使用的是快速排序。快速排序是不稳定的排序算法。
插入排序算法: 例子:
5, 8, 3, 6, 9, 2, 1
[5, 8], 3, 6, 9, 2, 1
[3, 5, 8], 6, 9, 2, 1
[3, 5, 6, 8], 9, 2, 1
[3, 5, 6, 8, 9], 2, 1
[2, 3, 5, 6, 8, 9], 1
[1, 2, 3, 5, 6, 8, 9]
<ul>
<li v-for="item in sortStudents">{{item}}</li>
</ul>
new Vue({
el: '#app',
data: {
students: [{name:'jspang',age:32},{name:'Panda',age:30},{name:'PanPaN',age:21},{name:'King',age:45}]
},
computed: {
sortStudens() {
return this.items.sort()
}
},
methods: {
sortNumber(a,b) {
return a-b;//升序,b-a为降序
}
}
})
常规用{{}} 与 用v-text=“” 都能输出data值 v-text解决的问题:当我们网速很慢或者javascript出错时,会暴露我们的{{xxx}}
v-html可以输出html标签,但是需要注意的是:在生产环境中动态渲染HTML是非常危险的,因为容易导致XSS攻击。所以只能在可信的内容上使用v-html,永远不要在用户提交和可操作的网页上使用。
双向数据绑定,通常都是运用在表单组件中
.lazy 在change时而非input时再更新数据 .number 自动将用户的输入值转为数值类型(文本框的数字会默认转变成字符串) .trim 去掉用户输入的首尾空格
可以用在input(text、checkbox、radio)、textarea上
//html
<input type="checkbox" id="cat" value="cat" v-model="animals">
<label for="cat">cat</label>
<input type="checkbox" id="dog" value="dog" v-model="animals">
<label for="dog">dog</label>
<input type="checkbox" id="fish" value="fish" v-model="animals">
<label for="fish">fish</label>
<input type="checkbox" id="bird" value="bird" v-model="animals">
<label for="bird">bird</label>
<p>{{animals}}</p>
(显示所有选中的value)
//js
data: {
animals: []
}
//html
<input type="radio" id="cat" value="cat" v-model="animals">
<label for="cat">cat</label>
<input type="radio" id="dog" value="dog" v-model="animals">
<label for="dog">dog</label>
<input type="radio" id="fish" value="fish" v-model="animals">
<label for="fish">fish</label>
<input type="radio" id="bird" value="bird" v-model="animals">
<label for="bird">bird</label>
<p>{{animals}}</p>
(显示单个选中的value)
//js
data: {
animals: ''
}
绑定 html标签属性值:比如img的src、a的href css属性值 1)直接绑定class
:class="className" :class="[className1,className2]"
2)条件绑定class
简单判断 :class="{className: isTrue}" 三元运算符 :class="isTrue?className1:className2"
3)直接绑定style
:style="{color:red}"
4)用对象绑定
:style="styleObj" data: { styleObj: {color:red} }
<div v-pre>{{msg}}</div> 直接显示{{msg}}
在vue渲染完指定dom后才显示
[v-cloak] { display: none; } <div v-cloak> {{ message }} </div>
在第一次DOM时进行渲染,渲染完成后视为静态内容,跳出以后的渲染过程。
<div v-once>第一次绑定的值:{{message}}</div> <div><input type="text" v-model="message"></div>