前言
当我们踏入前端开发的领域，
Vue、Uniapp和微信小程序无疑是我们经常会接触到的重要工具。而动态Style拼接语法作为前端开发中的一个关键环节，在这三个平台中的实现方式存在着一定的差别。通过这篇笔记，我希望能将最近发现的这个差异分享出来，助大家在前端开发的道路上更加得心应手。
一、背景
最近刚刚完成了一个基于 Uniapp 开发的小程序（这也是我首次接触 Uniapp），我仅负责在这个已有的项目里新增一个大模块的需求。而此需求，正是我自己原生小程序项目中的其中一个模块，并且这个模块之前也在 Vue 的 H5 项目中写过类似的。
正因如此，我才遭遇了同一个动态绑定的 Style 写法，在三种不同工具中处理动态 Style 拼接语法时的不同表现。
二、比较在三种工具中的拼接写法
- 在
Uniapp中的写法：
代码如下：
:style="'margin-left:'+ (step-1)*6 + 'px'+';padding-left:' + ((step-1)*6 + 6) + 'px'"
注意点：此处为加号与字符串拼接的方式。
- 在
Vue中的写法：
代码如下：
:style="`margin-left: ${(step-1)*6}px; padding-left: ${(step-1)*6 + 6}px;`"
注意点：此处为模板字符串（``）即反引号包裹的拼接方式。
- 在
微信小程序中的写法：
代码如下：
style="margin-left: {{(step-1)*12}}px; padding-left: {{(step-1)*12 +12}}px;"
注意点：此处原生小程序的字符串拼接方式，即双大括号{{}}的写法。
三、Uniapp 和Vue中的写法并不相通
微信小程序中的语法拼接写法应该不用再介绍了。
下面重点说一下 Uniapp 和 Vue 中的语法拼接的写法。
虽然说 uni-app 是一个使用 Vue.js 开发所有前端应用的框架，使用 Vue.js 的语法和组件系统，它允许开发者编写一次代码，然后发布到不同的平台。
然而，在 Uniapp 中并不支持采用 Vue 里的模版字符串拼接语法。倘若在 Uniapp 中运用模版字符串，运行时便会报错，如下图：
而将拼接语法改为普通的字符串和加号的组合方式，就会正常运行，如图：
四、总结
在实际项目中，即使是相似的功能需求，在不同的框架和工具中实现的方式也可能存在差异。就拿动态 Style 拼接语法来说，Vue、Uniapp 和微信小程序就各有千秋。在处理动态 Style 拼接语法时，它们有着不同的表现。这不仅考验着开发者的技术功底，也影响着项目的开发效率和质量。
