Vue.js学习第三天——动态绑定style及计算属性
Vue.js学习第三天——动态绑定style及计算属性
今天是元宵节，先祝大家元宵节快乐，也祝在前线的医务人员节日快乐，希望疫情早日过去，加油
继昨天学习的动态绑定class属性，今天是动态绑定style属性，同样的，也分为数组语法和对象语法，一般数组语法应用的不多，了解即可。
- 对象语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container">
<h2 v-bind:style="{fontSize:fontSize}">{{message}}</h2>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#container',
data: {
message: 'hello',
fontSize: '100px'
}
})
</script>
</body>
</html>
- 数组语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container">
<h1 :style='[baseStyle , baseStyles]'>{{message}}</h1>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#container',
data: {
message: 'hello',
baseStyle: { background: 'red' },
baseStyles: { fontSize: '20px' },
}
})
</script>
</body>
</html>
今天还学了一个计算属性 computed ，作用呢看起来与methods方法差不多，实际上它们的差别还是有的，在computed中，存在着 set 和 get两个方法，但是我们一般都将他们简写了，但是还是要知道有这两样东西
computed 与 methods 的区别？
computed在使用中，系统会存在有缓存，当检测到数据没有发生改变时，computed会使用缓存中的数据，但是methods会重复调用其中的函数，所以在这方面来说，methods的性能要比低一些。
下面是一些基本的例子：
set和get函数：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container">
<h1>{{message}} {{finalName}}</h1>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#container',
data: {
message: 'hello',
startName: 'real',
endName: 'cute'
},
computed: {
finalName: {
set: function(){
console.log('---');
},
get:function () {
return this.startName + ' ' + this.endName;
}
}
}
})
</script>
</body>
</html>
基本使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container">
<h1>总价格 {{totalPrice}}</h1>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#container',
data: {
books: [{id:'1000',name:'Linux编程原理',price:100},
{id:'1001',name:'php编程原理',price:110},
{id:'1002',name:'C编程原理',price:120},
{id:'1003',name:'Java编程原理',price:130}]
},
computed:{ //计算属性 函数名一般不加动词
totalPrice:function(){
let price = 0;
for(let attr in this.books){
price += this.books[attr].price
}
return price;
}
}
})
</script>
</body>
</html>
元宵节偷懒了，没有写多少，嘿嘿！