专栏首页娱乐心理测试解读mpvue官方文档的Class 与 Style 绑定及不支持语法

解读mpvue官方文档的Class 与 Style 绑定及不支持语法

在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上也是不可行的,需要做一下的修改。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • mongodb11天之屠龙宝刀(九)js函数入门:MongoDB基于js的数据类型修改

    mongodb11天之屠龙宝刀(九)js函数入门:MongoDB基于js的数据类型修改 原文连接:直通车 Mongodb并不提供Alter table这...

    学到老
  • 并发编程之显式条件

    我们之前介绍 synchronized 关键字语义的时候说过,synchronized 虽然不需要我们手动的加锁和释放锁了,但不代表他没有用到锁。同时,我们说每...

    Single
  • Hexo 入门指南(二) - 安装、初始化和配置

    站点的配置文件是_config.yml,如果你不小心改花了,这里提供了一份默认的:

    ApacheCN_飞龙
  • 【教程】javascript&浏览器对象入门教程

    * 此教程是头一章 估计我以后也不想写什么第二章了 * 需要的基础知识:javascript语法和常用对象 * 大神勿喷...

    ApacheCN_飞龙
  • 半路出家程序员的痛旁人不会懂

    非科班出身的程序员,不仅要面对科班出身者的技术优势,还要面临职场偏见,尽管压力重重,但只要够努力,这一切都不是问题。

    技术zhai
  • 解决easyui combobox赋值boolean类型的值时,经常出现的内容显示的value而不是text的bug

    本来这是一个很简单的combobox赋值,但是当我真正赋值时却出现了问题,经常出现一个bug,就是赋值完,combobox显示的内容是true或者false,而...

    用户1737026
  • 大厂面试官:Java工程师的“十项全能”

    技术zhai
  • Javascript中四种函数调用方式

    function showmsg(){ console.log(this);}

    ApacheCN_飞龙
  • HTML5与HTML4的区别,新增的元素有哪些?

    注:部分格式编写存在<>封闭错误,只为在博客中显示,并非正确写法。 1. HTML5推出的理由

    学到老
  • Vue2.5源码阅读笔记01—代码结构与初始化

    Vue作为当下最流行的渐进式的js框架,其渐进式的思想、虚拟DOM的运用、组件化的开发模式、响应式数据侦听原理值得开发者进行探索学习,其中运用的代码组织的技巧,...

    csxiaoyao

扫码关注云+社区

领取腾讯云代金券