index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
<h2 v-for="item in letters">{{item}}</h2>
<button @click="btn">点击</button>
</div>
<script>
let app =new Vue({
el:'#app',
data:{
letters:['111','333','222','444']
},
methods:{
btn(){
// 1.push方法 在数组的最后添加元素
// this.letters.push('aaa')
// this.letters.push('sss','ssvv')
// 2.pop():删除数组中的最后一个元素
// this.letters.pop()
// 3.shift():删除数组中的第一个元素
// this.letters.shift()
// 4.unshift():在数组最前面添加元素
// this.letters.unshift('as','dd')
// 5.splice作用：删除元素/插入元素/替换元素
// 删除元素：第二个参数传入你要删除几个元素（如果没有传，就删除后面所有的元素）
// 替换元素：第二个参数，表示我们要替换几个元素，后面是用于替换前面的元素
// 插入元素：第二个参数，传入0，并且后面跟上要插入的元素
// this.letters.splice(1,2,'ad','adf') //替换
// this.letters.splice(1,0,'sdv') //插入
// this.letters.splice(1,3) //删除元素
// 6.sort() 排序
// this.letters.sort()
// 7.reverse() 反转
// this.letters.reverse()
**
// 注意：通过索引修改数组中的元素------是没有响应式变化的
**
// this.letters[0] = "sss"
// this.letters.splice(0,1,'sss')
// vue中实现
// set(要修改的对象，索引值，修改后的值)
Vue.set(this.letters,0,'sss')
}
}
})
</script>
</body>
</html>
运行结果：
2.案例：
index.html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../js/vue.js"></script>
<style>
.active{
color: salmon;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item ,index) in movies" :class="{active:indexs==index}" @click="btn(index)">{{item}}---{{index}}</li>
</ul>
</div>
<script>
let app = new Vue({
el:'#app',
data:{
movies:["海王","海尔小孩","哈哈哈","呵呵呵"],
indexs:0
},
methods:{
btn:function (index) {
// console.log(index);
console.log(index);
this.indexs = index
}
}
})
</script>
</body>
</html>
运行结果：
3.购物车案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="books.length">
<table border="1" style="border-color: rgba(0,0,0,0.3);text-align: center">
<thead>
<tr>
<td></td>
<td>书籍名称</td>
<td>出版日期</td>
<td>价格</td>
<td>购买数量</td>
<td>操作</td>
</tr>
</thead>
<tr v-for="(item,index) in books">
<!-- <td v-for="value in item">{{value}}</td>-->
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price | showPrice}}</td>
<td>{{item.data}}</td>
<td>
<button @click="decrement(index)" :disabled="item.count<=1">-</button>
{{item.count}}
<button @click="increment(index)">+</button>
</td>
<td><button @click="remove(index)">移出</button></td>
</tr>
<tbody>
</tbody>
</table>
<h2>总价格：{{totalPrice | showPrice}}</h2>
</div>
<div v-else>
<h2>购物车为空</h2>
</div>
</div>
<script>
let app = new Vue({
el:'#app',
data:{
books:[
{id:1,
name:'<算法导论>',
data:'2006',
price:58,
count:1
},
{id:1,
name:'<Linu编程艺术>',
data:'2005',
price:120,
count:3
},
{id:1,
name:'<编程珠玑>',
data:'210',
price:60,
count:2
},
{id:1,
name:'<计算机网络>',
data:'2016',
price:88,
count:1
}
]
},
methods:{
increment(index){
this.books[index].count++
},
decrement(index){
this.books[index].count--
},
remove(index){
this.books.splice(index,1)
}
},
computed:{
totalPrice(){
let total = 0
for (let i=0;i<this.books.length;i++){
total += this.books[i].price * this.books[i].count
}
return total
}
},
filters:{
showPrice(price){
return '￥'+ price.toFixed(2)
}
}
})
</script>
</body>
</html>
运行结果：
