- ， 7 8月 2021
- 作者 847954981@qq.com
- 前端学习
Vue基础③
计算属性
当我们使用诸如
代码语言：javascript复制<p>{{ message.split('').reverse().join('') }}</p>以此语法写出的代码读起来十分费劲且也不符合面向对象的思想。所以我们选用
代码语言：javascript复制<p>{{ reverseMessage }}</p>并通过计算属性来完成。
计算属性（computed）
计算属性是继 data、methods、watch 之后又一成员
代码语言：javascript复制<script>
export default {
name: 'app',
// 计算属性
computed: {},
};
</script>如我们完成上面的效果，可以：
代码语言：javascript复制<script>
export default {
name: "app",
data:function(){
return {
message:"优课达--学的比别人好一点～"
}
}
// 计算属性
computed:{
reverseMessage:function(){
return this.message.split('').reverse().join('')
}
}
};
</script>其实上面的方法使用methods也能完成：
代码语言：javascript复制<div id="app">
<p>原字符串：{{ message }}</p>
<p>反转后的字符串：{{ reverseMessage() }}</p>
</div> methods: {
reverseMessage: function () {
return this.message.split('').reverse().join('');
},
},看起来没有什么区别，无非是 {{ }} 内略有不同罢了。
那么为什么要用计算属性呢？
因为计算属性有依赖和缓存两个性质
依赖：案例中 就是计算属性的依赖 缓存：上一次计算得到的值 结合上面的案例解释一下：
计算属性：
- 当
message发生改变（即依赖变化）， 计算属性会重新计算，然后返回计算结果； message不发生改变（即依赖不变化）， 计算属性会返回缓存的值，而不会重新计算。
方法： 每次访问的时候，都会去执行方法体里的逻辑，然后返回结果。
总结：计算属性避免了不必要的代码执行，性能更优
动态class
我们可以通过 v-bind 来动态绑定class，以此来完成动态样式如
代码语言：javascript复制<div class="base" v-bind:class="{ active: isActive }"></div>.active {
border: 1px solid green;
}data:function(){
return {
isActive:false
}
}其中 active 表示类名，而 isActive 表示一个布尔类型的值以此来表示是否启用此类。
其中，类名书写也有规则，比如类名为 base-active 时，我们需要使用 单引号或者双引号来包裹如：
代码语言：javascript复制<div v-bind:class="{ 'base-active': isActive }"></div>引号规则
如果大括号用双引号引起来，那边类名就要用单引号引起来，反之依然如：
代码语言：javascript复制<!-- 外双内单 -->
<div v-bind:class="{ 'base-active': isActive }"></div>
<!-- 外单内双 -->
<div v-bind:class='{ "base-active": isActive }'></div>动态样式绑定也可以绑定多个类名，只要逗号间隔就行
代码语言：javascript复制<div v-bind:class='{ "base-active": isActive,"base":true}'></div>除了上面的绑定写法，样式绑定也支持三元表达式：
代码语言：javascript复制<div
v-bind:class="[isChoosed ? 'redbg' : 'bluebg']"
></div>动态style
除了可以添加动态的外部样式，vue也支持添加动态行内样式
代码语言：javascript复制<div :style="flexStyle"></div>data:function(){
return {
flexStyle: {
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
alignItems: 'center',
flexWrap: 'no-wrap',
},
}
}同时，可以通过添加变量来达成动态效果，但全局变量内不能引用全局变量。
和动态class一样，其也可以添加数组和三元表达式
如
代码语言：javascript复制data() {
return {
fontStyle: { color: 'red', fontSize: '33px' },
boxStyle:{width: '200px', height: '200px', border: `1px solid black`}
};
},可以用数组表达
代码语言：javascript复制<div :style="[fontStyle,boxStyle]">这里是文字</div>也可以使用三元表达式
代码语言：javascript复制<div :style="[fontStyle, isActive ? boxStyle : colorBox]">这里是文字</div>
