使用v-bind:style绑定内联样式时，transform在各浏览器控制台中并未看到有自动添加浏览器引擎前缀
20170101 opened this issue · 2 comments
教程中的原文：
当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS property 时，如 transform，Vue.js 会自动侦测并添加相应的前缀。
自己试了用v-bind:style绑定transform: 'rotate(7deg)' 可是在Chrome, IE, Opera中F12打开控制台看相应元素的样式，都显示的是transform，而不是-webkit-transform, -ms-transform, -o-transform。
是不是文中举的transform例子已经不会自动添加前缀了，如果是的话希望教程中此处能替换一个可以自动添加前缀的样式作为例子
教程中的原文： 当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS property 时，如 transform，Vue.js 会自动侦测并添加相应的前缀。
自己试了用v-bind:style绑定transform: 'rotate(7deg)' 可是在Chrome, IE, Opera中F12打开控制台看相应元素的样式，都显示的是transform，而不是-webkit-transform, -ms-transform, -o-transform。
是不是文中举的transform例子已经不会自动添加前缀了，如果是的话希望教程中此处能替换一个可以自动添加前缀的样式作为例子
源码里确实有写这样的逻辑，我也没仔细看，但我通过实验得到了一些答案。
我的理解 是transform属性目前已支持绝大多数浏览器，vue目前版本不会自动加兼容前缀。
box-orient:'horizontal' 然后我试了下这个属性,这个属性不加浏览器兼容前缀是不生效的。
关于box-orient属性的mdn链接
https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-orient
vue对这种需要加==浏览器兼容前缀==的属性，会自动侦测并添加
火狐浏览器效果：
style="-moz-box-orient: horizontal;"
谷歌浏览器效果：
style="-webkit-box-orient: horizontal;"