自定义变量

1、什么是自定义变量？

自定义变量是灵蹊内部维护的各种状态，可以通过链接设置、代码控制等改变这种状态，状态的变化可以响应式的体现到界面上：根据状态（变量）变化，可以渲染模板、控制元素class、控制元素隐藏显示等。

2、为什么需要自定义变量

请看下面的场景：

场景1）、在落地页中，比如教育类落地页，会有价格、折扣甚至库存等信息，这种信息是动态的，需要通过API从数据后台动态读取的，所以必有如下流程：请求API-->获取需要信息-->渲染数据到指定元素。
在上述这个场景中，出现的可能复杂的点是：价格、折扣、库存等信息显示位置不止一处，且显示样式不同（在灵蹊中显示样式不同，可能意味着DOM结构不同）。
使用传统方式，需要访问各处DOM，设置对应的值，维护程度可想而知，任何DOM的变化都可能导致模块无法正常工作。
使用变量，只要为每个需要显示的位置绑定变量，请求回来后为对应的变量赋值，那么就可以保证所有绑定的变量被替换为具体的值；样式单独编辑，变量只负责绑定数据，实现样式和内容分离，维护和复用更为方便。

场景2）、落地页中，有很多场景的展示与否是有条件的，比如用户设置挽留弹窗，是根据是否支付来确定是否出现挽留弹窗或者弹窗内容；又比如用户是否登录、是否购买等展示内容是不一致的。
使用变量，我们可以方便的控制各种状态切换以及控制对应项目的显示隐藏，这种控制可以作用于组件、区块和弹窗。

3、如何绑定模板变量

双击进入文本编辑，选中要绑定变量的文本，点击菜单即可

设置后，可以对变量$global.price做赋值运算，支持同步和异步

4、如何通过变量控制显示隐藏

选中元素（区块、弹窗）-->进入高级设置即可

设置了条件展示之后，我们可以通过直接改变popup变量的方式来控制被绑定元素的状态（显示、隐藏），比如通过按钮来改变变量状态，可以添加按钮，设置链接来实现

这样设置的含义是：当点击发生时，变量popup会被修改为1，满足上图中弹窗设置的显示条件，弹窗会自动显示。

5、如何用变量控制组件class

有时，我们需要根据不同状态对元素显示不同效果，比如tab切换时tab签的效果变换、以及轮播图元素的选中非选中效果，如下图（PS：变量并不能简单的实现复杂的轮播图和tab切换效果）

这种情况下，我们可以为需要动态变化的元素设置一个class，通过变量来控制元素是否应用这个class。

设置方式：选中元素-->进入高级设置

如上图，当变量p的值为p1时，class active 被添加到绑定该变量的元素上，否则会被移除

综上，可以使用变量去渲染模板、控制元素（显示隐藏）、动态添加class。所有页面变量都是响应式的，可以再任何实际去做改变，任何状态的改变都会同步更新到用户界面上。