vue系列=计算属性

1、计算属性

1、计算属性。当模板显示的某个数据需要通过已有数据进行一定的逻辑计算才能确定时，就可以选择用计算属性语法来实现。先来看利用计算属性语法重构后的代码，具体如下。

2、代码中多出一个配置对象computed。实际上这就是Vue中计算属性定义的位置，整个代理对象需要的计算属性都需要定义在computed配置对象中
<template><h1>计算属性和侦听器</h1><p>{{ message }}</p>
<p>{{ reversedMessage }}</p><p>{{ returnAge }}</p><button @click="changeMessage">Change Message</button></template>
<script>export default {data() {return {message: 'Hello Vue 3.0',age: 25,}},computed: {reversedMessage() {return this.message.split('').reverse().join('')},returnAge() {return this.age>=18? 'adult' : 'teenager'}},}</script>

2、计算属性和method方法结合

1、计算属性认为就是一些逻辑性的处理问题上，只是让相关的内容不显示在模板上

2、计算属性的效果，也可以采用方法来进行，方法也是有着同样的效果。

3、计算属性的setter

1、计算属性的setter可以让计算属性进行修改，原本只有只读的属性。

4、监听内容

4、1监听的基本用法

1、有的时候，在依赖数据发生变化时，我们需要让其产生一些“副作用”。例如，直接更新DOM，或者执行异步操作后，更新其他数据。此时我们可以使用Vue的监听语法来实现

2、监听相关的内容就是属性值，

3、可以通过watch选项配置一个函数来监听某个响应式属性的变化
<template><h1>计算属性和侦听器</h1><p>{{ message }}</p>
<p>{{ reversedMessage }}</p><p>{{ returnAge }}</p><button @click="changeMessage">Change Message</button>
<p></p><input type="number" v-model="age"><p>{{ returnAge }}</p><p>{{ returnAgeText }}</p></template>
<script>export default {data() {return {// watch监听的是这边的属性值，当值发生变化时，会触发回调函数message: 'Hello Vue 3.0',age: 25,returnAgeText: '18以下'}},computed: {reversedMessage() {return this.message.split('').reverse().join('')},returnAge() {return this.age>=18? 'adult' : 'teenager'}},watch: {// 进行监听age属性的变化age(newVal, oldVal) {console.log('age changed', newVal, oldVal)this.returnAgeText = "当前age："+newVal + "===="+ oldVal}},}

5、动态样式的绑定

1、class样式的绑定

1、在模板中，给标签绑定动态样式的方式有两种，分别是class绑定和style绑定

2、class绑定主要有三类，表达式的值支持字符串、对象和数组3种类型

3、

1、class动态绑定
2、字符串绑定，  样式的类名不确定，需要动态绑定
3、对象啊绑定，样式的个数确定，类名确定，但是需要动态决定是否需要绑定
4、数组绑定，样式的个数不确定，需要动态绑定-->
<template><h1>class动态绑定</h1>
<!--  字符串绑定--><div :class="classStr">  字符串绑定</div><!--  对象绑定--><div :class="classObj">对象绑定</div><!--  数组绑定--><div :class="classArr" @click="changeClass">数组绑定</div></template>
<script>export default {data() {return {// watch监听的是这边的属性值，当值发生变化时，会触发回调函数classStr: 'active',    //字符串绑定classObj: {          //对象绑定active: false,           //active: false表示没有active类名'text-danger': true    //因为带有空格，所以需要用引号包裹},classArr: ['active', 'text-danger']  //数组绑定}},methods: {changeClass() {this.classArr.pop()   //去掉最后一个元素}}}
</script><style>.active {color: red;font-size: 20px;
}
.text-danger {color: blue;
}
</style>

2、style样式的绑定

1、style绑定同样是通过“v-bind：style="表达式"”来绑定动态style样式的，当然我们一般会使用“：style="表达式"”的简写方式。表达式的值支持字符串、对象和数组3种类型，但是在实际开发中，开发者一般使用对象类型的写法

2、一般采用对象的方式进行

3、style样式的绑定基本都是差不多，一般采用对象的形式进行，这样就可以比较好修改相关内容
<template><h1>class动态绑定</h1>
<div :class="classStr">  字符串绑定</div><div :class="classObj">对象绑定</div><div :class="classArr" @click="changeClass">数组绑定</div><div><h1>style绑定</h1><div :style="styleObj">对象绑定</div><div @click="changeStyleObj">修改对象绑定</div></div></template>
<script>export default {data() {return {// watch监听的是这边的属性值，当值发生变化时，会触发回调函数classStr: 'active',    //字符串绑定classObj: {          //对象绑定active: false,           //active: false表示没有active类名'text-danger': true    //因为带有空格，所以需要用引号包裹},classArr: ['active', 'text-danger'],  //数组绑定styleObj: {color: 'blue',fontSize: '16px',backgroundColor: 'yellow'}}},methods: {changeClass() {this.classArr.pop()   //去掉最后一个元素},changeStyleObj() {    //修改style对象绑定this.styleObj.color = 'green'this.styleObj.fontSize = '30px'}}