计算属性
1.指令修饰符
a.增加监听事件，也是要通过绑定的：
enter:封装了 if(e.key==='Enter')
b.格式转换：v-model.trim和v-model.number
c.v-model:去除空格和转数字
d.@click.stop:加了这个指令以后，父类方法就不会调用。
e.@click.prevent:组织默认事件（比如不让链接跳转）。
2.v-bind控制样式，数组和动态
class元素定义的时候用 。
布尔值可以用一个表达式动态渲染，这样就可以在页面中切换。
切换样式，其实就是在不断切换下标。
动态设置样式，和class相似：
适用于单个属性的控制。
JS对象不能有横杠
关于每个绑定这个可以看视频，记是记不住了
v-model：应用于其他元素
代码（更快的获取其他的值）：
<!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>
<style>
textarea {
display: block;
width: 240px;
height: 100px;
margin: 10px 0;
}
</style>
</head>
<body>
<div id="app">
<h3>小黑学习网</h3>
姓名：
<input type="text" v-model="username"> {{username}}
<br><br>
是否单身：
<input type="checkbox" v-model="isSingle" @click="isSingle =!isSingle" > {{isSingle}}
<br><br>
<!--
前置理解：
1. name: 给单选框加上 name 属性 可以分组 → 同一组互相会互斥
2. value: 给单选框加上 value 属性，用于提交给后台的数据
结合 Vue 使用 → v-model
-->
性别:
<input v-model="gender" type="radio" name = "gender" value="1">男
<input v-model="gender" type="radio" name = "gender" value="2">女
<br>
{{gender}}
<br>
<!--
前置理解：
1. option 需要设置 value 值，提交给后台
2. select 的 value 值，关联了选中的 option 的 value 值
结合 Vue 使用 → v-model
-->
所在城市:
<select v-model="cityId">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">成都</option>
<option value="4">南京</option>
</select>{{cityId}}
<br><br>
自我描述：
<textarea v-model="desc"></textarea> {{desc}}
<button>立即注册</button>
</div>
<script src="C:\Users\31127\Desktop\VueStudy\flash\vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
username:"",
isSingle:false,
gender:1,
cityId:1,
desc:""
}
})
</script>
</body>
</html>
计算属性：
计算属性完整版
代码：
<body>
<div id="app">
姓：<input type="text" v-model="firstName">+
名：<input type="text" v-model="lastName">=
<span> {{fullName}}</span>
<br><br>
<button @click="changeName()">修改姓名</button>
</div>
<script src="C:\Users\31127\Desktop\VueStudy\flash\vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName:'刘',
lastName:"备"
},
computed: {
// fullName(){
// return this.firstName+this.lastName
// }
// 以下是完整写法 获取+设置
fullName:{
get(){
return this.firstName+this.lastName
},
//当fullName计算属性，被修改赋值
set(value){
this.firstName= value.slice(0,1)
this.lastName = value.slice(1)
}
}
},
methods: {
changeName(){
this.fullName ="吕小布"
}
}
})
</script>
</body>
3.Watch侦听器（监视器）
改我是改成功了 那这个Async有什么用？？？
完整写法：
代码：
4.案例：水果购物车
1.disabled
2.checked
3.every
4.reduce
代码：
<body>
<div class="app-container" id="app">
<!-- 顶部banner -->
<div class="banner-box"><img src="C:\Users\31127\Desktop\VueStudy\img\fruit.jpg" alt="" /></div>
<!-- 面包屑 -->
<div class="breadcrumb">
<span>🏠</span>
/
<span>购物车</span>
</div>
<!-- 购物车主体 -->
<div class="main" v-if="fruitList.length>0">
<div class="table">
<!-- 头部 -->
<div class="thead">
<div class="tr">
<div class="th">选中</div>
<div class="th th-pic">图片</div>
<div class="th">单价</div>
<div class="th num-th">个数</div>
<div class="th">小计</div>
<div class="th">操作</div>
</div>
</div>
<!-- 身体 -->
<div class="tbody">
<div v-for="(fruit,index) in fruitList" :key="fruit.id" class="tr" :class="{ active:fruit.isChecked }">
<div class="td"><input type="checkbox" v-model="fruit.isChecked" /></div>
<div class="td"><img :src=fruit.icon alt="" /></div>
<div class="td">{{fruit.price}}</div>
<div class="td">
<div class="my-input-number">
<!-- :disabled 不让其作用 -->
<button class="decrease" :disabled="fruit.num<=1" @click="dec(fruit.id)"> - </button>
<span class="my-input__inner">{{fruit.num}}</span>
<button class="increase" @click="add(fruit.id)"> + </button>
</div>
</div>
<div class="td">{{fruit.num*fruit.price}}</div>
<div class="td"><button @click="del(fruit.id)">删除</button></div>
</div>
</div>
</div>
<!-- 底部 -->
<div class="bottom">
<!-- 全选 -->
<label class="check-all">
<input type="checkbox" v-model="isAll" />
全选
</label>
<div class="right-box">
<!-- 所有商品总价 -->
<span class="price-box">总价 : ¥ <span class="price">{{totalPrice}}</span></span>
<!-- 结算按钮 -->
<button class="pay">结算( {{totalCount}})</button>
</div>
</div>
</div>
<!-- 空车 -->
<div class="empty" v-else>🛒空空如也</div>
</div>
<script src="C:\Users\31127\Desktop\VueStudy\flash\vue.js"></script>
<script>
const defaultFruits = [
{
id: 1,
icon: 'C:\\Users\\31127\\Desktop\\VueStudy\\img\\火龙果.png',
isChecked: false,
num: 2,
price: 6,
},
{
id: 2,
icon: 'C:\\Users\\31127\\Desktop\\VueStudy\\img\\荔枝.png',
isChecked: false,
num: 7,
price: 20,
},
{
id: 3,
icon: 'C:\\Users\\31127\\Desktop\\VueStudy\\img\\榴莲.png',
isChecked: false,
num: 3,
price: 40,
},
{
id: 4,
icon: 'C:\\Users\\31127\\Desktop\\VueStudy\\img\\鸭梨.png',
isChecked: true,
num: 10,
price: 3,
},
{
id: 5,
icon: 'C:\\Users\\31127\\Desktop\\VueStudy\\img\\樱桃.png',
isChecked: false,
num: 20,
price: 34,
}
]
const app = new Vue({
el: '#app',
data: {
// 水果列表,一旦数组为空，则将其设为默认值。
fruitList: JSON.parse(localStorage.getItem('list')).length == 0 ? defaultFruits : JSON.parse(localStorage.getItem('list')),
},
methods: {
del(id) {
this.fruitList = this.fruitList.filter(fruit => fruit.id != id)
},
dec(id) {
const fruit = this.fruitList.find(fruit => fruit.id === id)
fruit.num--
},
add(id) {
const fruit = this.fruitList.find(fruit => fruit.id === id)
fruit.num++
},
},
watch: {
fruitList: {
deep: true,
handler(newValue) {
// 变化后的值存入本地，但是要转JSON
localStorage.setItem('list', JSON.stringify(newValue))
}
}
},
computed: {
// 完整写法 = get+set
totalCount() {
return this.fruitList.reduce((sum, fruit) => {
if (fruit.isChecked) {
return sum + fruit.num
} else {
return sum
}
}, 0)
},
totalPrice() {
return this.fruitList.reduce((sum, fruit) => {
if (fruit.isChecked) {
return sum + fruit.num * fruit.price
} else {
return sum
}
}, 0)
},
isAll: {
//必须所有的小选框都选中，才选中全选。--->every
get() { return this.fruitList.every(fruit => fruit.isChecked) },
// 基于拿到的布尔值同步小选框
set(value) { return this.fruitList.forEach(fruit => fruit.isChecked = value) },
}
},
})
</script>
</body>
扫一扫
8293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
