vue强制绑定css3的缩放效果transfrom:scale()
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()的更多相关文章
- (尚007)Vue强制绑定class和style
注意:class和style的值是动态的值 1.test007.html <!DOCTYPE html><html lang="en"><head&g ...
- CSS3旋转缩放移动倾斜等效果——transform
1.transform浏览器支持情况 也就是说目前不考虑老浏览器的话是不用加前缀的,感谢菜鸟教程:https://www.runoob.com/cssref/css3-pr-transform.htm ...
- css3实现动画效果
一.动画效果的常用属性 实现动画效果需要借助css3的下列属性:transform,transion,animation(具体可以参见教材) 二.动画效果实例 1)文字闪烁的动画效果 /*文字的闪烁效 ...
- css3的transition效果和transfor效果
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- vue双向绑定的原理及实现双向绑定MVVM源码分析
vue双向绑定的原理及实现双向绑定MVVM源码分析 双向数据绑定的原理是:可以将对象的属性绑定到UI,具体的说,我们有一个对象,该对象有一个name属性,当我们给这个对象name属性赋新值的时候,新值 ...
- 基于Vue的页面切换左右滑动效果
HTML文本页面: <template> <div id="app> <transition :name="direction" mode= ...
- Vue双向绑定原理,教你一步一步实现双向绑定
当今前端天下以 Angular.React.vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋. 所以我们要时刻保持好奇心,拥抱变化,只有在不断的变 ...
- vue双向绑定原理及实现
vue双向绑定原理及实现 一.总结 一句话总结:vue中的双向绑定主要是通过发布者-订阅者模式来实现的 发布 订阅 1.单向绑定和双向绑定的区别是什么? model view 更新 单向绑定:mode ...
- 《JavaScript 实战》:JavaScript 实现拖拽缩放效果
拖拉缩放效果,实现通过鼠标拖动来调整层的面积(宽高)大小,例如选框效果.这里的拖拉缩放比一般的选框复杂一点,能设置八个方位(方向)的固定触发点,能设置最小范围,最大范围和比例缩放. 跟拖放效果一样,程 ...
随机推荐
- 知识工程.Vs.软件构架,框架,设计模式.
软件工程-原文链接:http://tech.it168.com/a2009/0902/672/000000672853.shtml 此文章详细给出了软件设计的基本概念和用途,文章链接:http://w ...
- 【从零开始】【Java】【0】装软件些
闲聊 其实最先写的是1,所以拐回头写的只能是0了. 因为要在不同的电脑上搞这个东西,必然涉及到装机,当然只是装我们用的这些,且是最基础的部分了. 大晚上的睡不着觉,起来,大概1个小时全部搞定,随便记下 ...
- ZBrush的双十一来了,然鹅...
不管是“光棍节”还是“剁手节” 似乎和我都没有什么关系 事实证明,我错了 今早竟然有不识趣的人发红包祝我单身快乐 纳尼,这是唱的哪一出? 我能直接怼回去,说不领么? 但好像又不是我的风格 哎,一个红包 ...
- DB2解决死锁
方法一.查看db2diag.log文件 找到DeadLock or Lock timeout搜索 死锁或锁超时信息db2 force application(句柄ID)直接结束进程即可. 方法二.DB ...
- vc++如何创建程序-构造函数02
1.若忘记了赋值,出现运行结果是很大的负值(因为我们定义的x与y这两个成员变量存储在内存中是一个随机的值) 当我们调用时,随机输出. //包含输入输出的头文件#include<iostream. ...
- 死磕itchat源码--__init__.py
itchat包中的__init__.py是该库的入口:在该文件中的源码如下: # -*- coding: utf-8 -*- from . import content from .core impo ...
- UVA-11806 Cheerleaders 计数问题 容斥定理
题目链接:https://cn.vjudge.net/problem/UVA-11806 题意 在一个mn的矩形网格里放k个石子,问有多少方法. 每个格子只能放一个石头,每个石头都要放,且第一行.最后 ...
- 洛谷P1914 小书童——密码
题目背景 某蒟蒻迷上了"小书童",有一天登陆时忘记密码了(他没绑定邮箱or手机),于是便把问题抛给了神犇你. 题目描述 蒟蒻虽然忘记密码,但他还记得密码是由一串字母组成.且密码是由 ...
- Linux安装expect命令
[Linux安装expect命令]:--expect是在Tcl基础上创建起来的,所以在安装expect前我们应该先安装Tcl.①:tcl安装源码下载:http://www.tcl.tk/softwar ...
- python开发项目:学生选课系统
程序要求:1.创建北京.上海两所学校(分析:通过学校类实例化两个学校实例) 2.创建Linux.python.go三个课程,Linux\go在北京开,Linux在上海开(创建Linux.python. ...