1.v-for循环指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<ul>
<!-- 1.(ele,index) in arr
ele 是你遍历容器中的当前元素
index 当前元素的索引
arr 是你要遍历的容器
in/of 都可以使用
-->
<li v-for="(ele,index) in arr" :key="index">{
{index}}--{
{ele}}</li>
</ul>
<ul>
<!-- 2.遍历json数据(v,k,index) in jsonData
k 键
v 值
index为键值对的索引
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一 key attribute：建议尽可能在使用 v-for 时提供 key attribute
-->
<li v-for="(k,v,index) in jsonData" :key="k">
{
{index}}--{
{v}}--{
{k}}
</li>
</ul>
<!--遍历json数组(obj,index) -->
<ol>
<li v-for="(obj,index) in jsonArr" :key="index">
{
{obj.username}}--{
{obj.age}}
</li>
</ol>
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el: "#box",
data: {
arr: [10, 20, 30, 40, 50],
jsonData: {
"username": "张三",
"age": 23,
},
jsonArr: [{
"username": "张三",
"age": 23,
}, {
"username": "李四",
"age": 24,
}, {
"username": "王五",
"age": 25,
}]
}
})
</script>
运行结果为：
2.循环案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--Vue 视图---数据 数据一变化，视图就会更新，你自己不要想着去操作DOM -->
<div id="box">
<ul>
<li v-for="(obj,index) in jsonArr">
序号：{
{index}}---姓名：{
{obj.name}}--年龄：{
{obj.age}}--性别：{
{obj.sex}}--
<a href="#" @click="delObj(index,obj.name)">删除</a>--
<a href="#" @click="updateObj(index,myobj)">修改</a>
</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el: "#box",
data: {
jsonArr: [{
"name": "张三",
"age": 23,
"sex": "男"
}, {
"name": "李四",
"age": 24,
"sex": "男"
}, {
'name': '王五',
'age': 25,
'sex': '男'
}],
myobj: {
"name": "赵六",
"age": 26,
"sex": "男"
}
},
methods: {
delObj(index, name) {
//alert(index);
//根据索引来删除
if (confirm("你确认要删除" + name + "吗？")) {
/*
数组更新检测
变更方法
Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
push() 往数组中后面添加元素
pop() 删除数组后面的元素
shift() 删除数组前面的元素
unshift() 往数组中前面添加元素
splice() 根据索引删除
sort() 排序
reverse() 反转
*/
this.jsonArr.splice(index, 1);
}
},
updateObj(index, obj) {
//根据索引来更新元素
//alert(obj);
//this.jsonArr[index]=obj 这个方式，数组中的元素，被你改了，但是视图没有侦听到，没有触发视图的更新
this.jsonArr.splice(index, 1, obj);
// this.jsonArr[index]=obj;
// this.jsonArr.reverse().reverse();
}
}
})
</script>
运行结果为：
3.排序搜索案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
li {
list-style-type: none;
}
</style>
<body>
<div id="box" align="center">
<input type="" name="" id="" value="" placeholder="请输入内容" v-model="content" />
<ul>
<li v-for="(obj,index) in newArr " :key="index">
{
{index+1}}---{
{obj.name}}---{
{obj.age}}---{
{obj.sex}}
</li>
</ul>
<button type="button" @click="mySort(1)">升序</button>
<button type="button" @click="mySort(2)">降序</button>
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el: "#box",
data: {
content: '',
jsonArray: [{
'name': '张三',
'age': 23,
'sex': '男'
}, {
'name': '李四',
'age': 24,
'sex': '男'
}, {
'name': '王五',
'age': 25,
'sex': '男'
}, {
'name': '赵六',
'age': 26,
'sex': '男'
}]
},
computed: {
newArr: function() {
var neirong = this.content
console.log("this.content,计算属性对应的函数就会调用")
//根据用户输入的内容，从旧数组中过滤新的内容放到新数组中返回
var myArr = this.jsonArray.filter(function(ele) {
/* if(ele.name.indexOf(neirong)!=-1){
return true;
}else{
return false;;
}*/
//alert(this);这里的this不是vue对象，而是window对象
console.log(this);
return ele.name.indexOf(neirong) != -1;
})
//箭头函数 es6的语法 箭头函数中的this可以根据上下文的环境
//
// var myArr=this.jsonArray.filter(ele=>ele.name.indexOf(this.content)!=-1)
return myArr;
}
},
methods: {
mySort(num) {
if (num == 1) {
//按照年龄升序排序
this.jsonArray.sort(function(a, b) {
return a.age - b.age;
});
} else if (num == 2) {
this.jsonArray.sort((a, b) => b.age - a.age);
}
}
}
})
</script>
运行结果为：
