绑定样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<style>
.box {
width: 500px;
height: 200px;
border: 1px solid red;
}
.Ren {
font-size: 50px;
}
.Blue {
background: red;
}
.Yellow {
border-radius: 50%;
}
</style>
</head>
<body>
<div id="root">
<div class="box" :class="moodArr">绑定样式数组形式</div>
<div class="box" :class="moodObj">绑定样式布尔形式</div>
<div class="box" :style="styleArr">绑定样式style对象形式</div>
<div class="box" :style="styleObj">绑定样式style数组形式</div>
</div>
<script>
new Vue({
el: "#root",
data: {
name: "盒子",
mood: "boxRen",
moodArr: ['Ren', 'Blue', "Yellow"],
moodObj: {
Ren: true,
Blue: false,
Yellow: true
},
styleArr: {
fontSize: "50px",
color: "blue"
},
styleObj: [
{
fontSize: "50px",
color: "blue"
},
{
background: "red"
}
]
},
methods: {
},
})
</script>
</body>
</html>
案例点击对div随机颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<style>
.box {
width: 500px;
height: 200px;
border: 1px solid red;
}
.boxRen {
background: red;
}
.boxBlue {
background: blue;
}
.boxYellow {
background: yellow;
}
</style>
</head>
<body>
<!-- 通过点击事件来修改一个盒子的背景颜色 -->
<div id="root">
<!-- 给div盒子通过v-bind添加mood属性 通过@click点击事件 -->
<div class="box" :class="mood" @click="boxMath">{{name}}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
name: "盒子",
mood: "boxRen"
},
methods: {
boxMath() {
// 获取到每个css样式的名字
const arr = ['boxRen', 'boxBlue', 'boxYellow']
// 随机出下标1-3
let index = Math.floor(Math.random() * 3)
// 给当前随机出来的样式
this.mood = arr[index]
}
},
})
</script>
</body>
</html>
条件渲染 v-if判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2 v-if="true">v-if 语句的判断</h2>
<h2 v-show="true">v-show 语句的判断</h2>
<span>n的值{{dianji}}</span>
<button @click="dianji++">N+1</button>
<h3 v-if="dianji === 1">一</h3>
<h3 v-else-if="dianji === 2">二</h3>
<h3 v-else-if="dianji === 3">三</h3>
<h3 v-else="dianji">hello</h3>
</div>
<script>
new Vue({
el: "#root",
data: {
dianji: 0
}
})
</script>
</body>
</html>
v-for 循环基本的列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<style>
ul>li {
border: 1px solid red;
width: 200px;
}
</style>
</head>
<body>
<div id="root">
<table>
<tr>
<th>学号</th>
<th>姓名</th>
<th>爱好</th>
</tr>
<tr v-for="p in persons">
<td>{{p.id}}</td>
<td>{{p.name}}</td>
<td>{{p.hobby}}</td>
</tr>
</table>
<ul v-for="p in persons">
<!-- persons 数组的名字 -->
<li>{{p.id}}-{{p.name}}-{{p.hobby}}</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data: {
persons: [
{ id: "10001", name: "柳清", hobby: "装蛋" },
{ id: "10001", name: "柳清", hobby: "装蛋" },
{ id: "10001", name: "柳清", hobby: "装蛋" },
{ id: "10001", name: "柳清", hobby: "装蛋" }
]
}
})
</script>
</body>
</html>
Vue写购物订单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<style>
table tr th,
td {
border: 1px solid red;
width: 100px;
text-align: center;
}
</style>
</head>
<body>
<div id="root">
<table>
<tr>
<th>货名</th>
<th>单价</th>
<th>数量</th>
<th>合计</th>
</tr>
<tr v-for="(a,index) in array">
<td>{{a.name}}</td>
<td>{{a.money}}</td>
<td>
<!-- v-bind 绑定元素属性
disabled 属性规定应该禁用 input 元素。
@click="sub(index)" 通过index来下标来确定具体修改的那个
-->
<button @click="sub(index)" v-bind:disabled="a.num<=0">-</button>
{{a.num}}
<button @click="add(index)">+</button>
</td>
<!-- 数组中 单价和个数进行相乘 -->
<td>{{a.sum=a.money*a.num}}</td>
</tr>
<tr>
<td>总价</td>
<td colspan="3">{{he}}</td>
</tr>
</table>
</div>
<script>
new Vue({
el: "#root",
data: {
array: [
{ name: "苹果", money: 200, num: 0, sum: 0 },
{ name: "香蕉", money: 200, num: 0, sum: 0 },
{ name: "橘子", money: 200, num: 0, sum: 0 },
{ name: "橙子", money: 200, num: 0, sum: 0 },
],
he: 0
},
methods: {
add(index) {
// alert(1)
return this.array[index].num++
},
sub(index) {
return this.array[index].num--
}
},
watch: {
array: {
// 默认为true
// 深度监视
deep: true,
// 自动监视
// immediate: 其值是true或false,确认是否以当前的初始值执行handler的函数.
immediate: true,
handler(sum) {
this.he = 0
for (var i = 0; i < sum.length; i++) {
this.he += sum[i].money * sum[i].num
}
}
}
}
})
</script>
</body>
</html>
Key的原理 列表的过滤 同时降序和升序 Vue.set 的使用
key原理的案例
:key='a.id' 根据id来匹配dom就会根据id来进行依次匹配
:key='index' 根据index来匹配dom从下面添加不会出现错误,如果从上面添加就会出现第一个被挤下来成为第二个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<button @click="clickArr">点击添加白龙马</button>
<ul>
<!-- :key='a.id' 根据id来匹配dom就会根据id来进行依次匹配 -->
<!-- :key='index' 根据index来匹配dom从下面添加不会出现错误,如果从上面添加就会出现第一个被挤下来成为第二个 -->
<li v-for="a,index in array" :key="a.id">
{{a.id}}-{{a.name}}-{{a.age}} <input type="text"> -{{index}}
</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data: {
array: [
{ id: "1001", name: "悟空", age: 20 },
{ id: "1002", name: "八戒", age: 11 },
{ id: "1003", name: "唐僧", age: 16 },
{ id: "1004", name: "和尚", age: 18 }
]
},
methods: {
clickArr() {
this.array.unshift({ id: "1005", name: "白龙马", age: 18 })
}
},
})
</script>
</body>
</html>
列表的过滤 同时降序和升序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<input type="text" v-model="keyword">
<button @click="sortType=1">升序</button>
<button @click="sortType=2">降序</button>
<button @click="sortType=0">原数据</button>
<ul>
<li v-for="a,index in selectArray">
{{a.id}}-{{a.name}}-{{a.age}}
</li>
</ul>
</div>
<script>
let vm = new Vue({
el: "#root",
data: {
array: [
{ id: "1001", name: "悟空", age: 20 },
{ id: "1002", name: "八戒", age: 11 },
{ id: "1003", name: "八唐僧", age: 16 },
{ id: "1004", name: "和尚", age: 18 }
],
keyword: "",
sortType: 0
// selectArray: []
},
// // 监视实现
// watch: {
// // 1.使用watch监听input里面需要输出的文本
// keyword: {
// // 默认先监听一遍
// immediate: true,
// // 2.获取到输入的文本
// handler(val) {
// // 3将获取到的数组赋值给定义的一个空数组
// // filter它用于把Array的某些元素过滤掉,然后返回剩下的元素。
// // 3.将数组进行筛选
// this.selectArray = this.array.filter(p => {
// // indexOf 如果要检索的字符串值没有出现,则该方法返回 -1。
// // 不等于-1的时候就是检索到了,将检索到了数据返回到 定义的数组中 selectArray: []
// return p.name.indexOf(val) !== -1
// })
// }
// }
// },
// 计算属性
computed: {
selectArray() {
let list = this.array.filter(p => {
return p.name.indexOf(this.keyword) !== -1
})
// 1.先写点击事件,当sortType大于0时对应的也就执行相应的代码
if (this.sortType > 0) {
list.sort((s1, s2) => {
// console.log(this); vue
return this.sortType === 1 ? s1.age - s2.age : s2.age - s1.age
})
}
return list
},
}
})
</script>
</body>
</html>
Vue.set 的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>学校信息:{{name}}</h2>
<h2>学校地址:{{weizh}}</h2>
<hr>
<h1>学生信息</h1>
<h1>姓名:{{student.name}}</h1>
<h1>年龄:{{student.age}}</h1>
<h1 v-if="student.sex">性别:{{student.sex}}</h1>
<button @click="btn">点击添加sex性别</button>
</div>
<script>
new Vue({
el: "#root",
data: {
name: "宣化",
weizh: "皇城街道",
student: {
name: "张三",
age: 18
},
},
methods: {
btn() {
Vue.set(this.student, 'sex', '男')
}
},
})
</script>
</body>
</html>