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. ACM_____不再爱你……

    不再爱你…… 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 现在有一个圆柱形水杯,里面装满了水,在它的底部有一个小洞,通过一些简单的物理知识我们可以知道: 1.由于重力 ...

  2. py2exe打包OpenCV,找不到libiomp5md.dll

    问题:py2exe打包OpenCV,找不到libiomp5md.dll 解决方法:把 libiomp5md.dll 从numpy/core/ 里面复制到 python27/DLLS/文件夹!!!

  3. MFC多标签页对话框

    原文链接(有修改):http://blog.sina.com.cn/s/blog_6a1cdb3f0101llcw.html 1.新建一个MFC工程 取名PageSheet,选择Dialog base ...

  4. [Intermediate Algorithm] - Spinal Tap Case

    题目 将字符串转换为 spinal case.Spinal case 是 all-lowercase-words-joined-by-dashes 这种形式的,也就是以连字符连接所有小写单词. 提示 ...

  5. 超酷消息警告框插件(SweetAlert)

    今天给大家推荐一款不错的超酷消息警告框–SweetAlert:SweetAlert是一款不需要jQuery支持的原生js提示框,风格类似bootstrap.它的提示框不仅美丽动人,并且允许自定义,支持 ...

  6. associatedtype关联类型

    associatedtype关联类型   定义一个协议时,有的时候声明一个或多个关联类型作为协议定义的一部分将会非常有用.关联类型为协议中的某个类型提供了一个占位名(或者说别名),其代表的实际类型在协 ...

  7. gcc和g++的区别和联系

    gcc和g++都是GNU(一个组织)的编译器. 1.对于.c后缀的文件,gcc把它当做是C程序:g++当做是C++程序: 2.对于.cpp后缀的文件,gcc和g++都会当做c++程序. 3.编译阶段, ...

  8. Corn Fields 状压动归入门题

    #include<cstdio> using namespace std; const int N=15; int dp[N][1<<N],v[1<<N],M[N] ...

  9. 日常记录-Pandas Cookbook

    Cookbook 1.更新内容 2.关于安装 3.Pandas使用注意事项 4.包环境 5.10分钟Pandas初识 6.教程 7.Cookbook 8.数据结构简介 9.基本功能 10.使用文本数据 ...

  10. 安装`lrzsz`包及其报错解决办法

    rz命令的安装包名是lrzsz. 安装lrzsz包时报错Failed to mount cd:///?devices=/dev/sr1,/dev/sr0 on /var/adm/mount/AP_0x ...