在vue.js项目转化为小程序时,把原来页面的代码直接拷贝过去,发现布局改变很多,很多已经设置的标签的css样式并没有显示出来,查看官方文档,得知原来vue.js的Class 与 Style 绑定,有些不适合mpvue,以下总结几点:
一. :class直接绑定方式
<template>
<div>
<div :class="career">测试</div>
</div>
</template>
.career{
background: red;
}
这种绑定对象的方式在vue.js上可以,在mpVue上不可行。根据官方提示我们可以用 computed 方法生成 class 或者 style 字符串,插入到页面中。
更改为适合mpvue 的形式代码:
<template>
<div>
<div :class="computedClassObject">测试</div>
</div>
</template>
computed: {
computedClassObject () {
return 'career'//重点:只需要在computed 方法生成 class的字符串
}
},
<style>
.career{
background: red;
}
</style>
一. :style直接绑定方式
<template>
<div>
<div :style="styleObj">测试</div>
</div>
</template>
data () {
return {
styleObj: {
type: Object,
default: function () {
return {
background: 'black',
color: "yellow"
}
}
}
}
},
这种直接绑定对象的方式在mpvue上也是不可行的,需要做一下的修改。