一、绑定样式
1、使用:class对象绑定样式
注意： :class绑定样式时，对象的属性是类选择器名称，属性值返回为true时，则表示添加该选择器。
1.1、创建vue容器
<div id="app">
<ul class="city">
<!-- :class绑定样式是，对象的属性是类选择器名称，属性值返回true，表示添加该选择器 -->
<li :class='{active:index===activeIndex}' @click='activeIndex=index' v-for='(item,index) in citys'
:key='index'>{{item}}</li>
</ul>
<ul class="city">
<li :class="index===activeIndex?'active':''" @click='activeIndex=index' v-for='(item,index) in citys'
:key='index'>{{item}}</li>
</ul>
<hr style="margin: 10px 0;">
<button @click='bgColor=true'>添加背景颜色</button>
<button @click='fontColor=true'>添加文本颜色</button>
<button @click='border=true'>添加容器边框</button>
<div class="box1" :class='{bgColor:bgColor,fontColor:fontColor,border:border}'>好好学习vue</div>
1.2、构建容器样式
<style>
* {
list-style: none;
margin: 0;
padding: 0;
}
.city {
display: flex;
margin: 10px;
}
.city li {
border: 1px solid #ccc;
padding: 4px 6px;
}
.city li.active {
background-color: burlywood;
color: white;
}
.box1 {
width: 200px;
height: 200px;
padding: 10px;
}
.bgColor {
background-color: skyblue;
}
.fontColor {
color: tomato;
}
.border {
border: 2px solid gray;
}
</style>
1.3、创建vue对象
<script src="../js/Vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
activeIndex: 0,
citys: ['北京', '南京', '上海', '广州'],
//是否添加北京颜色
bgColor: false,
//是否添加文本颜色
fontColor: false,
//是否显示边框
border: false,
//定义背景颜色
bgc: 'pink',
//定义文本颜色
fc: 'blue'
}
})
</script>
2、使用:class数组三元表达式绑定对象
<hr style="margin: 10px 0;">
<div class="box1" :class="[bgColor?'bgColor':'',fontColor?'fontColor':'',border?'border':'']">好好学习vue</div>
3、使用:style绑定对象
注意：:style绑定样式时，对象的属性名称是css样式的名称（要使用小驼峰命名法），属性值是具体的样式值
<!-- :style绑定样式时，对象的属性名称是css样式的名称（要使用小驼峰命名法），属性值是具体的样式值 -->
<div class="box1" :style="{backgroundColor:bgc,color:fc}">好好学习vue
<p>背景色：<input type="text" v-model='bgc'></p>
<p>文本色：<input type="text" v-model='fc'></p>
</div>
二、计算属性
注意：计算属性与vue对象里的方法相比 ，计算属性的优势是，有缓存，当页面数据发生变化时，所有的方法都要重新执行，但是只有当计算属性用到的数据发生变化时，计算属性才会重新执行。
<div id="app">
<p>姓：<input type="text" v-model="firstName"></p>
<p>名：<input type="text" v-model="lastName"></p>
<p>地址：<input type="text" v-model="address"></p>
<!-- 计算属性的优势是，有缓存，当页面数据发生变化时，所有的方法都要重新执行，当计算属性用到的数据发生变化时，计算属性才会重新执行 -->
<p>方法返回姓名：<input type="text" v-model="fullName2()"></p>
<p>计算属性返回姓名：<input type="text" v-model="fullName"></p>
<hr>
<ul>
<li v-for='(item,index) in goodses' :key='index'>{{item.name}}--{{item.price}}
<button @click='delGoods(index)'>删除</button>
</li>
<li>总价是--{{totalPrice}}元</li>
</ul>
</div>
<script src="../js/Vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
firstName: '张',
lastName: '李',
address: '南京',
goodses: [
{
name: '油烟机',
price: 2599
},
{
name: '冰箱',
price: 1599
},
{
name: '空调',
price: 3599
}
]
},
methods: {
fullName2(){
return this.firstName+'.'+this.lastName
},
delGoods(index){
this.goodses.splice(index,1)
}
// totalPrice(){
// console.log('我在计算总价格');
// let sum = 0
// this.goodses.forEach(r => {
// sum += r.price
// })
// return sum
// }
},
//用于定义计算属性
computed: {
totalPrice(){
console.log('我在计算总价格');
let sum = 0
this.goodses.forEach(r => {
sum += r.price
})
return sum
},
//在这里面定义的是方法，计算属性默认情况下只能读，不能改
fullName(){
console.log('我是计算属性')
return this.firstName+'.'+this.lastName
},
// //定义完整结构的计算属性
// fullName: {
// //get方法，用于返回计算属性的值
// get() {
// return this.firstName + '.' + this.lastName
// },
// // set方法，修改计算属性的结果，该方法接收一个参数是最新的值
// set(){
// let arr = val.spilt('.')
// this.firstName = arr[0]
// this.lastName = arr[1]
// }
// }
}
})
三、侦听器
注意：数据侦听器--根据属性的名称，定义一个方法，用于侦听该属性的变化。这个方法，可以传两个参数，第一个参数是最新值，第二个参数是旧值
<div id="app">
<p>姓名：<input type="text" v-model='name'></p>
<p>年龄：<input type="text" v-model='age'>{{myAge}}</p>
<hr>
<h2>学生信息</h2>
<button @click='resetStudent'>修改学生信息</button>
<p>姓名：<input type="text" v-model='student.name'></p>
<p>年龄：<input type="text" v-model='student.age'></p>
<p>性别：<input type="text" v-model='student.sex'></p>
</div>
<script src="../js/Vue.js"></script>
<script>
Vue.config.productionTip = false
new Vue({
el:"#app",
data:{
name:'张三',
age:22,
student:{
name:'李四',
age:20,
sex:'女'
}
},
methods: {
resetStudent(){
this.student = {
name:'王五',
age:33,
sex:'男'
}
}
},
//数据侦听器
watch:{
//根据属性的名称，定义一个方法，用于侦听该属性的变化
//这个方法，可以传两个参数，第一个参数是最新值，第二个参数是旧值
name(nval,oval){
//比如，当name属性发生变化时，重新发送Ajax请求获取新的数据
console.log(nval,oval);
},
// age(nval,oval){
// console.log(nval,oval);
// },
// student(nval,oval){
// console.log(nval,oval);
// },
//侦听对象，需要开启深度监视
student:{
//开启深度监视
deep:true,
//开始运行一次（注意：这种情况下，旧值是undefined）
immediate:true,
//定义监视函数
handler(nval,oval){
//开启深度监视，旧值已经没有意义，因为对象是引用类型的
//对象的属性值已经改了，就没有旧的属性值
console.log(nval,oval);
}
}
},
//计算属性也有监视对象的能力
computed:{
myAge(){
//当计算属性里面用到的数据发生变化时，会重新执行计算属性
//只是计算属性必须要在模板中使用
console.log(this.age);
return this.age
}
}
})
</script>
四、过滤器
注意：过滤器在模板中通过管道符| 的方式来调用，过滤器可以链式调用，就是之前已经过滤完成的结果，继续传递给下一个过滤器，注意顺序。
<div id="app">
<p>商品名称：{{goods.name}}</p>
<p>商品价格：{{toFixed2(goods.price)}}</p>
<p>商品价格：{{myGoods.price}}</p>
<!-- 通过管道符 | 调用过滤器，其实就是调用这个方法，将值传过去， -->
<p>商品价格（人民币）：{{goods.price | toFixed2 | toRMB}}
<input type="text" :value='goods.price | toFixed2'>
</p>
<!-- 过滤器可以链式调用，就是之前已经过滤完成的结果，继续传递给下一个过滤器，注意顺序 -->
<p>商品价格（美元）：{{goods.price | toFixed2 | toUS}}</p>
</div>
<hr>
<div id="app2">
<p>商品名称：{{goods.name}}</p>
<p>商品价格（美元）：{{goods.price | toFixed2 }}</p>
</div>
<script src="../js/Vue.js"></script>
<script src="../l03/index.js"></script>
<script>
Vue.config.productionTip = false
new Vue({
el:'#app2',
data:{
goods:{
name:'华为手机',
price:4311.6666
}
}
})
new Vue({
el: '#app',
data: {
goods: {
name: '小米手机',
price: 2566.5555
}
},
//定义方法，过滤商品的价格
methods: {
toFixed2(val) {
return val.toFixed(2)
}
},
//定义一个计算属性
computed: {
myGoods() {
let goods = {
name: this.goods.name,
price: this.goods.price.toFixed(2)
}
return goods
}
},
//定义过滤器
filters: {
//过滤器在模板中通过管道符| 的方式来调用
toFixed2(val) {
return val.toFixed(2)
},
//返回人民币数据
toRMB(val) {
return '￥' + val
},
//返回美元数据
toUS(val) {
return '$' + (val / 6.5).toFixed(2)
}
}
})
</script>
