<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue学习</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app1">
<h4>{{fullName}}</h4>
</div>
<script>
var foo = new Vue({
el: '#app1',
data: {
firstName: 'Foo',
lastName: 'Bar',
},
//computed 就是计算属性,特别常用 适用于 它的值是通过data数据得到的
computed: {
fullName: { //实时计算属性 下面包括要实时计算的属性
get: function () { //这是一个getter return出来东西的
return this.firstName + ' ' + this.lastName
},
set: function (newValue) { //setter 赋值
var names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1]
}
}
}
});
foo.fullName = 'A sun'; //调用setter赋值
alert(foo.firstName);
</script>
</body>
</html>
<!DOCTYPE html
>
<html
lang=
"en"
>
<head>
<meta
charset=
"UTF-8"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<title>vue学习
</title>
<script
src=
"https://cdn.jsdelivr.net/npm/vue"
>
<
/script>
<style>
.isActive{
opacity:
0.5;
}
.color{
color:
red;
font-size:
24px;
}
.abc{
background:
#333333;
}
<
/style>
</head>
<body>
<div
id=
"app1"
>
<h5
v-bind:class=
"['isActive','color']"
class=
"abc"
>sfsdfsd
</h5>
<!--数组语法 -->
<mycomp
v-bind:class=
"{isActive,color}"
></mycomp>
<!--模版下 绑定class-->
<h6
v-bind:style=
"{'font-size':'20px','display': ['-webkit-box', '-ms-flexbox', 'flex']}"
>dfdfdf
</h6>
</div>
<script>
var foo =
new Vue({
el:
'#app1',
data:{
isActive:
true,
color:
true,
styleObj:{
color:
'yellow'
}
},
components:{
'mycomp':{
template:
'<p class="abc">组件下的class</p>'
}
}
});
<
/script>
</body>
</html>