1 条件渲染
1.1 通过v-if和v-for实现购物车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/vue.js"></script>
<style>
.red {
background: red;
}
.green {
background: green;
}
.font {
font-size: 30px;
}
</style>
<title>Title</title>
</head>
<body>
<div id="box">
<!-- 土办法-->
<!-- <ul>-->
<!-- <li>{{shopping[0]}}</li>-->
<!-- <li>{{shopping[1]}}</li>-->
<!-- <li>{{shopping[2]}}</li>-->
<!-- </ul>-->
<!--v-for实现-->
<ul v-if="shopping.length>0">
<li v-for="data in shopping">{{data}}</li>
</ul>
<div v-else>购物车空空如也</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
shopping: ['苹果', '香蕉', '桃子'],
},
})
</script>
</html>
1.2 v-if/v-else-if/v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/vue.js"></script>
<style>
</style>
<title>Title</title>
</head>
<body>
<div id="box">
<div v-if="which==1">1111</div>
<div v-else-if="which==2">2222</div>
<div v-else>3333</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
which:1
},
})
</script>
</html>
2 列表渲染
2.1 for循环数组，对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/vue.js"></script>
<style>
</style>
<title>Title</title>
</head>
<body>
<div id="box">
<h1>循环数组</h1>
<div>
<p v-for="data in arr">{{data}}</p>
</div>
<h1>循环对象</h1>
<div>
<p v-for="data in obj">{{data}}</p>
</div>
<h1>循环数组索引和value</h1>
<div>
<p v-for="(data,index) in arr">索引是：{{index}}，数据是{{data}}</p>
</div>
<h1>循环对象key和value</h1>
<div>
<p v-for="(value,key) in obj">key是：{{key}}，value是：{{value}}</p>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
arr: ['zs', 'ls', 'ww'],
obj: {name: 'lqz', age: 18, sex: '男'},
},
})
</script>
</html>
2.2 key值的解释
1 v-for循环数组，对象时，建议在控件（组件，标签）写一个key属性，属性值唯一
2 页面更新以后，加速dom的替换（渲染）,虚拟dom的替换diff算法
3 :key="变量"
2.2 数组更新与检测
0 数据双向绑定，数据变化，页面变，页面变化数据变
1 使用以下方法操作数组，可以检测变动：push，pop，shift，unshift,splice,sort,reverse
2 不会检测变动filter(),concat(),slice(),map()，新数组替换旧数组
-页面不会更改：vm.arr.concat(['44','55'])
-解决vm.arr=vm.arr.concat(['44','55'])
3 页面不会更改：通过索引值更新数组
-解决方案一：
vm.arr[0]
"11"
vm.arr[0]='99'
"99"
vm.arr.splice(0,1,'88')
["99"]
-解决方案二
Vue.set(vm.arr,0,'lqz')
3 上面能更新是因为作者重写了那些方法
3 事件处理
3.1 input过滤案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<!--
blur:失去焦点触发
change：失去焦点触发，跟blur一样
input:数据发生变化，就会触发
-->
<!-- <input type="text" v-model="myinput" @blur="handleChange"> {{myinput}}-->
<!-- <input type="text" v-model="myinput" @change="handleChange"> {{myinput}}-->
<input type="text" v-model="myinput" @input="handleChange"> {{myinput}}
<br>
<div>
<p v-for="data in new_arr">{{data}}</p>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
myinput:'',
arr: ['aabbc', 'abc', 'aabcd','ccdd','bbcc'],
new_arr: ['aabbc', 'abc', 'aabcd','ccdd','bbcc'],
},
methods:{
handleChange(){
console.log(this.myinput)
//控制arr的变化，数据又双向绑定了，页面就会变化
this.new_arr=this.arr.filter(item=>{
return item.indexOf(this.myinput) >-1
})
}
}
})
//
// var a=['aabbc', 'abc', 'aabcd','ccdd','bbcc']
// var res=a.filter(function (itme) {
// // if (itme.length >4){
// // return true
// // }else {
// // return false
// // }
// // if (itme.indexOf('aa')>-1){
// // return true
// // }else {
// // return false
// // }
// return itme.indexOf('a')>-1
//
// })
//
//
// var res=a.filter(item=>{
// return itme.indexOf('a')>-1
// })
// console.log(res)
//
//
// var a=function (a) {
// }
//
// var a=a=>{}