Vue------第二天（计算属性、侦听器、绑定Class、绑定Style）
2017-11-22 00:00
1126 查看
摘要: 今天天气很晴朗，
路漫漫其修远兮......
(2)计算属性缓存vs方法
1)计算属性：
基于它们的依赖进行缓存的，只有相关依赖发生改变的时候才会重新求值，一般为响应式依赖
直接展示
有缓存
2)方法：需要调用才会返回值，并且没缓存
(3)计算属性vs侦听属性
当有一些数据需要随着其他数据变动而变动的时候，更好的做法是使用计算属性而不是命令式的watch回调
1)命令式的watch回调
2）计算属性
(4)计算属性的setter
计算属性默认只有getter,在需要时也可以提供getter
PS:这个代码set好像在Console里面不好使，后面再细看
a.传给v-bind:class一个对象，动态切换class
b.在传入的对象中传入更多属性来动态切换多个class，v-bind:class可以与普通的class属性共存
c.绑定的数据对象不必内联定义在模板中
d.可以绑定一个返回对象的计算属性，这是一个常用且强大的模式
(2)数组语法
a.把一个数组传给v-bind:class,应用一个class列表
b.用三元表达式来根据条件切换列表中的class
c.当有多个条件class的时候，在数组语法中可以使用对象语法
(3)用在组件上~~~~~~~暂时跳过
a.直接绑定
属性名称一般用驼峰式或者-分割开来写
b.绑定一个样式对象
(2)数组语法:将多个样式对象应用到同一个元素上
(3)自动添加前缀：v-bind:style使用需要添加浏览器引擎前缀的css属性时~~~~没懂
(4)多重值：给style绑定的属性提供一个包含多个值的数组作为属性值，常用语提供多个带前缀的值~~~~略略略
路漫漫其修远兮......
一、计算属性和观察者
1.计算属性
(1)基础例子<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="app1">
<p>原始值："{{ message }}"</p>
<p>反转值："{{ reverseMessage }}"</p>
</div>
<script>
var vm1 = new Vue({
el: '#app1',
data: {
message: 'Hello'
},
computed: {
// 声明计算属性reverseMessage, function用作计算属性的getter
reverseMessage: function () {
return this.message.split('').reverse().join(''); // this指向vm1
}
}
})
</script>
</body>
</html>(2)计算属性缓存vs方法
1)计算属性：
基于它们的依赖进行缓存的，只有相关依赖发生改变的时候才会重新求值，一般为响应式依赖
直接展示
有缓存
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="app1">
<p>Now："{{ now }}"</p>
</div>
<script>
var vm1 = new Vue({
el: '#app1',
computed: {
// 声明计算属性
now: function () {
return Date.now(); // Date.now()不是响应式的
}
}
})
</script>
</body>
</html>2)方法：需要调用才会返回值，并且没缓存
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="app1">
<p>原始值："{{ message }}"</p>
<p>反转值："{{ reverseMessage() }}"</p>
</div>
<script>
var vm1 = new Vue({
el: '#app1',
data: {
message: 'Hello'
},
methods: {
// 在组件中声明方法reverseMessage
reverseMessage: function () {
return this.message.split('').reverse().join(''); // this指向vm1
}
}
})
</script>
</body>
</html>(3)计算属性vs侦听属性
当有一些数据需要随着其他数据变动而变动的时候，更好的做法是使用计算属性而不是命令式的watch回调
1)命令式的watch回调
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="app1">
{{ fullName }}
</div>
<script>
var vm1 = new Vue({
el: '#app1',
data: {
firstName: 'yj',
lastName: 'lp',
fullName: 'yj lp'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
</script>
</body>
</html>2）计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="app1">
{{ fullName }}
</div>
<script>
var vm1 = new Vue({
el: '#app1',
data: {
firstName: 'yj',
lastName: 'lp'
},
computed: {
fullName: function () {
return this.firstName + this.lastName
}
}
})
</script>
</body>
</html>(4)计算属性的setter
计算属性默认只有getter,在需要时也可以提供getter
PS:这个代码set好像在Console里面不好使，后面再细看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="app1">
{{ fullName }}
</div>
<script>
var vm1 = new Vue({
el: '#app1',
data: {
firstName: 'yj',
lastName: 'lp'
},
computed: {
// 计算属性的getter
fullName: function () {
return this.firstName + ' ' + this.lastName
},
// 添加一个setter
set: function (newValue) {
var names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1]
}
}
})
</script>
</body>
</html>2.侦听器：当需要在数据变化时执行异步或者开销较大的操作时，响应数据的变化
------官网的例子对我这个小白来说有点费劲，等看懂基础再说吧，暂时跳过二、Class与Style绑定
v-bind指令实现：通过表达式计算出字符串、对象、数组等结果1.绑定HTML Class (v-bind:class)
(1)对象语法a.传给v-bind:class一个对象，动态切换class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="app1">
<div v-bind:class="{ active: isActive }">
</div>
</div>
<script>
var vm = new Vue({
el: '#app1',
data: {
isActive: true
}
})
</script>
</body>
</html>b.在传入的对象中传入更多属性来动态切换多个class，v-bind:class可以与普通的class属性共存
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="app1">
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
</div>
<script>
var vm = new Vue({
el: '#app1',
data: {
isActive: true,
hasError: false
}
})
</script>
</body>
</html>c.绑定的数据对象不必内联定义在模板中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="app1">
<div v-bind:class="classObject">
</div>
</div>
<script>
var vm = new Vue({
el: '#app1',
data: {
classObject:{
active: true,
'text-danger': true
}
}
})
</script>
</body>
</html>d.可以绑定一个返回对象的计算属性，这是一个常用且强大的模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="app1">
<div v-bind:class="classObject">
</div>
</div>
<script>
var vm = new Vue({
el: '#app1',
data: {
// 相当于默认值
isActive: true,
error: null
},
computed: {
// 声明计算属性classObject,根据data中的默认数据去判定是否为真，是响应式的
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
})
</script>
</body>
</html>(2)数组语法
a.把一个数组传给v-bind:class,应用一个class列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="app1">
<div v-bind:class="[activeClass, errorClass]">
</div>
</div>
<script>
var vm = new Vue({
el: '#app1',
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script>
</body>
</html>b.用三元表达式来根据条件切换列表中的class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="app1">
<div v-bind:class="[isActive ? activeClass: '', errorClass]">
</div>
</div>
<script>
var vm = new Vue({
el: '#app1',
data: {
isActive: true,
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script>
</body>
</html>c.当有多个条件class的时候，在数组语法中可以使用对象语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="app1">
<div v-bind:class="[{ active: isActive }, errorClass]">
</div>
</div>
<script>
var vm = new Vue({
el: '#app1',
data: {
isActive: true,
errorClass: 'text-danger'
}
})
</script>
</body>
</html>(3)用在组件上~~~~~~~暂时跳过
2.绑定内联样式 v-bind:style
(1)对象语法a.直接绑定
属性名称一般用驼峰式或者-分割开来写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="app1">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">
Hello
</div>
</div>
<script>
var vm = new Vue({
el: '#app1',
data: {
activeColor: 'red',
fontSize: 30
}
})
</script>
</body>
</html>b.绑定一个样式对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="app1">
<div v-bind:style="styleObject">
Hello
</div>
</div>
<script>
var vm = new Vue({
el: '#app1',
data: {
styleObject: {
color: 'red',
fontSize: '16px'
}
}
})
</script>
</body>
</html>(2)数组语法:将多个样式对象应用到同一个元素上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="app1">
<div v-bind:style="[styleObject,style2Object]">
Hello
</div>
</div>
<script>
var vm = new Vue({
el: '#app1',
data: {
styleObject: {
color: 'red',
fontSize: '16px'
},
style2Object: {
fontWeight: 'bolder'
}
}
})
</script>
</body>
</html>(3)自动添加前缀：v-bind:style使用需要添加浏览器引擎前缀的css属性时~~~~没懂
(4)多重值：给style绑定的属性提供一个包含多个值的数组作为属性值，常用语提供多个带前缀的值~~~~略略略
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Vue.js笔记-计算属性 class与style绑定
- Vue中计算属性与class,style绑定
- 【Vue】-(5) 计算属性与class,style绑定
- 详解vue 计算属性与方法跟侦听器区别(面试考点)
- VUE--（2）计算属性和侦听器
- Vuejs——（3）计算属性，样式和类绑定
- Vuejs——（3）计算属性，样式和类绑定
- Vue.js总结学习(指令、计算属性、数据绑定)
- vue.js基础知识篇(3):计算属性、表单控件绑定
- vue样式（style）和属性（class）绑定的几种基本方法
- Vue条件循环判断+计算属性+绑定样式v-bind
- Vue.js学习笔记：v-bind属性绑定（class,src）
- Vue条件循环判断+计算属性+绑定样式v-bind的实例
- vue 三元表达式class、图片切换 （涉及计算属性）
- vue中，class、内联style绑定、computed属性
- vue-cli 属性绑定高级用法 class 对象方法
- vue从入门到进阶：计算属性computed与侦听器watch（三）
- vue.js入门教程之绑定class和style样式
- Vue.js计算属性