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 实现拖拽缩放效果
拖拉缩放效果,实现通过鼠标拖动来调整层的面积(宽高)大小,例如选框效果.这里的拖拉缩放比一般的选框复杂一点,能设置八个方位(方向)的固定触发点,能设置最小范围,最大范围和比例缩放. 跟拖放效果一样,程 ...
随机推荐
- HighCharts 图表插件 自定义绑定 时间轴数据
HighCharts 图表插件 自定义绑定 时间轴数据,解决时间轴自动显示数据与实际绑定数据时间不对应问题! 可能要用到的源码片段:http://code.662p.com/list/14_1.htm ...
- 三维重建:QT+OpenNI+Kinect图像校正
后记: 当时能不放弃这个方向是因为这里面涉及了一种很有效的三位场景存储方式,可能给出除图元建模之外的一种三维场景描述方式.这和Flash与位图的对比一样,基于图元的flash始终抵不过基于点描述的位图 ...
- 03--软件包管理工具 apt
APT APT(the Advanced Packaging Tool)是Ubuntu 软件包管理系统的高级界面,由几个名字以“apt-”打头的程序组成.apt-get.apt-cache ...
- [SOA]REST与SOA两种架构的异同比较
REST的特性 它基于HTTP协议,是一种明确构建在客户端/服务端体系结构上的一种风格.特征如下: 1.网络上的资源都被抽象为资源,这些资源都具有唯一的统一资源标识符(URI:Uniform Reso ...
- 创建一个dynamics CRM workflow (五) - Deploy Custom Workflows
我们打开plugin registeration tool. 注册一个新的assembly. custom workflow 和 plugin注册的方法还有些不同. 这一步custom workflo ...
- JDBC连接MySQL数据库(一)——数据库的基本连接
JDBC的概念在使用之前我们先了解一下JDBC的概念, JDBC的全称是数据库连接(Java Database Connectivity),它是一套用于执行SQL语句时的API,应用程序可以通过这套A ...
- SQL2012安装
SQL2012安装 1.打开SQL安装包,点击setup安装 2.选择安装界面,点击全新安装 3.验证通过后,点击确定 4.选择我接受,点击下一步 5.在外网环境,可进行在线更新,内网环境取消勾选产品 ...
- C++基础 (8) 第八天 数组指针 模板指针 C语言中的多态 模板函数
1昨日回顾 2 多态的练习-圆的图形 3多态的练习-程序员薪资 4员工管理案例-抽象类和技术员工的实现 employee.h: employee.cpp: technician.h: technici ...
- Spring MVC @PathVariable with dot (.) is getting truncated.
转自:http://stackoverflow.com/questions/3526523/spring-mvc-pathvariable-getting-truncated (这里只截取了问题,和笔 ...
- web service服务是查询QQ用户是否在线
使用php5开发客户端: <?php try { //$client = new SoapClient("HelloService.wsdl",array('encoding ...