vue学习（一）—vue

name: ‘Pande’,

age: 38

},

{

name: ‘Panpan’,

age: 23

},

{

name: ‘King’,

age: 13

},

{

name: ‘Huang’,

age: 12

},

{

name: ‘Huangxiaoguo’,

age: 30

}

],

person:{

name:“huangxiaoguo”,

age:25,

job:“前端工程师”

}

},

//计算

computed: {

//The computed property “items” is already defined in data.

//这里是vue的保护机制，如果不重新声明会污染原来的数据源

//同时上面也要适应下面的变量

sortItems: function() {

return this.items.sort(sortNumber);

},

sortStudents:function(){

return sortByKey(this.students,‘age’);

}

},

});

function sortNumber(a, b) {

return a - b;

};

//数组对象方法排序:

function sortByKey(array, key) {

return array.sort(function(a, b) {

var x = a[key];

var y = b[key];

return((x < y) ? -1 : ((x > y) ? 1 : 0));

});

}

---

注意：v-for也可以循环对象输出内容

一般最好加上

:key=‘index’

提高性能

• v-text&v-html

v-text&v-html

---

{{message}}=

{{dodo}}

---

• v-on

v-on

---

本场比赛得分:{{fenshu}}

加分

<button @click=“jianfen”>减分

<input type=“text” @keyup.enter=“onEnter” v-model=“fenshu2” />

---

• v-model双向数据绑定

v-model双向数据绑定

---

元素数据：{{message}}

文本框

v-model ：

v-model.lazy：

v-model.number：

v-model.trim：

---

文本域

---

多选框绑定一个值

{{isTrue}}

---

多选框绑定数组

huang

xiao

guo

{{web_names}}

单选框绑定

男

女

你选择的性别是：{{sex}}

---

• v-bind

v-bind

---

晓果博客

---

1、绑定Class

2、绑定Class中的判断

3、绑定Class中的数组

4、绑定Class中的三元运算符

---

isOK={{isOK}}

---

5、绑定Style

6、绑定Style 对象

---

通过某个字段选择样式

:class=“{‘A’:‘red’,‘B’:‘blue’,‘C’:‘green’,‘D’:‘pink’}[hero.score]”>

{{hero.name}},{{hero.score}}