vue不提供 transfrom:scale(1.5) ; 会报错 ,错误是  "TypeError: _vm.scale is not a function";

原因:Vue将其误认为scale是函数

解决方法:可以使用模板字符串

<template>
<div class="wrap" ref="message" :style="scaleFun"> <!--这里注意没有{},不能写成{sss} -->
<div class="bigPic"></div>
</div>
</template> <script>
export default {
data(){
return {
scale:0.5,
}
},
computed:{
scaleFun:function () {
var scale = this.scale;
return `transform:scale(${scale})`
}
}
}
</script>

vue强制绑定css3的缩放效果transfrom:scale()的更多相关文章

  1. (尚007)Vue强制绑定class和style

    注意:class和style的值是动态的值 1.test007.html <!DOCTYPE html><html lang="en"><head&g ...

  2. CSS3旋转缩放移动倾斜等效果——transform

    1.transform浏览器支持情况 也就是说目前不考虑老浏览器的话是不用加前缀的,感谢菜鸟教程:https://www.runoob.com/cssref/css3-pr-transform.htm ...

  3. css3实现动画效果

    一.动画效果的常用属性 实现动画效果需要借助css3的下列属性:transform,transion,animation(具体可以参见教材) 二.动画效果实例 1)文字闪烁的动画效果 /*文字的闪烁效 ...

  4. css3的transition效果和transfor效果

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  5. vue双向绑定的原理及实现双向绑定MVVM源码分析

    vue双向绑定的原理及实现双向绑定MVVM源码分析 双向数据绑定的原理是:可以将对象的属性绑定到UI,具体的说,我们有一个对象,该对象有一个name属性,当我们给这个对象name属性赋新值的时候,新值 ...

  6. 基于Vue的页面切换左右滑动效果

    HTML文本页面: <template> <div id="app> <transition :name="direction" mode= ...

  7. Vue双向绑定原理,教你一步一步实现双向绑定

    当今前端天下以 Angular.React.vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋. 所以我们要时刻保持好奇心,拥抱变化,只有在不断的变 ...

  8. vue双向绑定原理及实现

    vue双向绑定原理及实现 一.总结 一句话总结:vue中的双向绑定主要是通过发布者-订阅者模式来实现的 发布 订阅 1.单向绑定和双向绑定的区别是什么? model view 更新 单向绑定:mode ...

  9. 《JavaScript 实战》:JavaScript 实现拖拽缩放效果

    拖拉缩放效果,实现通过鼠标拖动来调整层的面积(宽高)大小,例如选框效果.这里的拖拉缩放比一般的选框复杂一点,能设置八个方位(方向)的固定触发点,能设置最小范围,最大范围和比例缩放. 跟拖放效果一样,程 ...

随机推荐

  1. C# 学习笔记_类

    定义:将成员及方法封装到类中,类的实例则称为对象. 结构:属性,类修饰符,class,类名,{类体} 类修饰符:new,public,protected,internal,private,abstra ...

  2. CaptCha的现状与未来

    2011年的老文.................转自于伯乐在线:http://blog.jobbole.com/4655/       有一个机会,朋友推荐一个创业的哥们给我认识,方向就是验证码识别 ...

  3. BigDataMini导论

    Q: BigDataMini从大量数据中挖掘有用的信息,对AI有何意义? A: 随着智能硬件化,DataMini可以作为AI的一种数据筛选方法,简化AI的设计进程.

  4. better-scroll的使用方法,动态创建dom使用better-scroll

    移动端经常会用页面高度超过了手机屏幕的高度,但是有没有滚动条的出现这时候就用 better-scroll 这个插件, iscroll 是常用的但是这个组件没有人在维护了,导致很多的问题没有办法解决. ...

  5. Ubuntu终端命令行缩短显示路径

    平时我们使用linux终端命令行的时候,常常会被一个问题困扰,那就是文件路径过长, 有时候甚至超过了一行,这样看起来非常别扭,其实只要两步就可以解决这个问题: 1,修改.bashrc文件(用户根目录下 ...

  6. Spring AOP 介绍与基于接口的实现

    热烈推荐:超多IT资源,尽在798资源网 声明:转载文章,为防止丢失所以做此备份. 本文来自公众号:程序之心 原文地址:https://mp.weixin.qq.com/s/vo94gVyTss0LY ...

  7. 小白学习Spark系列二:spark应用打包傻瓜式教程(IntelliJ+maven 和 pycharm+jar)

    在做spark项目时,我们常常面临如何在本地将其打包,上传至装有spark服务器上运行的问题.下面是我在项目中尝试的两种方案,也踩了不少坑,两者相比,方案一比较简单,本博客提供的jar包适用于spar ...

  8. 2019-04-03 SQL Group By某列,预先对该列进行一个预处理,提炼出共有的信息,即关键字case when 列名什么条件 then 赋值 else 赋值 end as 新列名

    select sum(发行金额) from( select PoolNameFormat,count(cast(ItemValue as decimal(19,4))) as 发行笔数,sum(cas ...

  9. Hibernate的事务机制

    http://www.cnblogs.com/jerryxing/archive/2012/04/24/2468999.html http://www.cnblogs.com/xiaofeilee/p ...

  10. 《代码敲不队》第八次团队作业:Alpha冲刺 第三天

    项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 代码敲不队 作业学习目标 掌握软件编码实现的工程要求. 团队项目github仓库地址链接 GitH ...