首页 > 其他分享 >Vue动态绑定内联样式( v-bind:style )

Vue动态绑定内联样式( v-bind:style )

时间:2023-02-08 18:55:51浏览次数:41  
标签:style Vue return bind JSON data

  1. <button @click="change" type="button">改变Box大小

data(){
    return {
        imgStyle:{

        }
    }
},
computed:{
    imgStyle(){
        return {
           paddingBottom:(this.singleItemObj.height/this.singleItemObj.width).toFixed(2)*100+'%'

        }

    }
},

vue 3 获取proxy 对象的值需序列化

 this.nftInfo=JSON.parse(JSON.stringify(data))

标签:style,Vue,return,bind,JSON,data
From: https://www.cnblogs.com/zzyxx/p/17102971.html

相关文章

  • vue3+element表格数据导出
    实现效果导出后的效果:步骤第一步:安装依赖npminstall--savexlsxfile-saver第二步:给表格添加id,导出的时候需要用到<!--导出按钮--><el-buttontype="pri......
  • vue3语法糖+ts组件传值
    在开发中有些功能是通用的,而且逻辑大致相同,像这种东西可以封成一个组件,比较常用的就是函数封装,组件封装,组件封装是需要引入到页面使用的,所以通常它会有一些自己的方法,父子......
  • element plus + vue3表单第一次数据未清空的bug问题解决
    使用框架:elementPlus+vue3场景描述:场景一:表单的添加和修改功能,公用同一个弹框,点击修改后,点击添加表单显示的是上次修改的数据。场景二:点击修改,数据回显到表单,然后......
  • vue注意点$attrs、$slots
    $attrs号称捡漏王当父组件给子组件传值,子组件并没有接收数据时,此时数据在$attrs中可以拿到,并且如果子组件不需要使用数据,而孙组件需要,则可以直接v-bind="$attrs"传给孙。......
  • eslint+prettier+stylelint+husky控制代码质量
    配置eslint1.安装eslintcnpminstalleslint--save-dev2.eslint初始化(1)HowwouldyouliketouseESLint?选择:Tochecksyntaxandfindproblems(2)Wh......
  • 完整工作流整合方案,自定义配置,Java+Vue+Activiti@附配套文档
    前言activiti工作流引擎项目,企业erp、oa、hr、crm等企事业办公系统轻松落地,一套完整并且实际运用在多套项目中的案例,满足日常业务流程审批需求。一、项目形式springboot......
  • vue3 和vue2的区别
    1.数据的响应式不同答:vue2是通过object.defineProperty()方法,get是获取属性,set是修改属性。但是新加的属性和删除的属性则没有响应式,还有就是通过数组的下标来修改值,......
  • 【vue3】父子组件通信之 vue3 defineProps,defineEmits ,defineExpose
    1、简介父组件通过v-bind绑定一个数据,然后子组件通过defineProps接受传过来的值,2、代码示例1)给Menu组件传递了一个title字符串类型是不需要v-bind<template><d......
  • vue春招面试题
       一、MVVM模型●model->data数据●view->dom模型,●viewModel->视图模型,实例。相当于一个桥梁 二、Vue中响应式数据的理解  三、Vue如何检测数组变化......
  • 【pinia-plugin-persistedstate】Vue3 pinia 数据持久化插件 pinia-plugin-persisteds
    为什么需要持久化?刷新浏览器后,重新加载页面时会重新初始化vue、pinia,而pinia中状态的值仅在内存中存在,而刷新导致浏览器存储中的数据就没了。在实际开发中,浏览器刷新......