如何在Vue.js与Elixir的Slim模板中结合两类变量编写条件判断？

在Vue.js条件判断中结合Vue变量与Elixir（Phoenix）变量（Slim模板场景） #

没问题，这是Phoenix + Vue栈里很常见的需求——服务端渲染的Elixir变量和客户端的Vue变量经常需要配合做逻辑判断。核心思路很简单：Elixir会在服务端渲染页面时先把变量解析成原生JavaScript能识别的值，之后Vue在客户端再处理自己的变量逻辑。

下面分两种场景给你示例，先从你提到的直接在v-if里混合的写法开始，再给更优雅的进阶方案：

1. 直接在v-if指令中混合使用（Slim模板语法）

在Slim里，嵌入Elixir代码用#{}插值语法，你需要把Elixir变量转换成合法的JS表达式，再和Vue变量结合：

// 基础示例：处理布尔值类型的Elixir变量
div[v-if="vuevar || #{if @conn.assigns.elixirvar, do: "true", else: "false"}"]
  | 当Vue的vuevar为真，或者服务端的elixirvar为真时，显示这段内容

这里要注意一个坑：Elixir的true/false直接输出是字符串"true"/"false"，而JavaScript里非空字符串都是真值——如果elixirvar是false，直接写#{@conn.assigns.elixirvar}会变成"false"，在Vue条件里会被当成true，完全不符合预期。所以上面用if判断输出原生JS的布尔值true/false，确保逻辑正确。

如果你的Elixir变量是数值或字符串，也要确保渲染成合法的JS：

// 数值类型直接插值即可
div[v-if="vuevar > 5 || #{@conn.assigns.elixir_number_var} > 10"]
  | 客户端变量大于5，或服务端变量大于10时显示

// 字符串类型用Jason.encode!确保引号和转义正确
div[v-if="vuevar === 'active' || #{Jason.encode!(@conn.assigns.elixir_string_var)} === 'admin'"]
  | 客户端状态为active，或服务端角色为admin时显示

2. 更优雅的方案：通过data属性传递服务端变量

如果逻辑比较复杂，或者不想在模板里混杂服务端代码，更推荐把Elixir变量通过元素的data-*属性传递给Vue，然后在Vue的data里接收，之后就可以完全用Vue变量做判断了：

#app[data-server-var=@conn.assigns.elixirvar data-server-role=Jason.encode!(@conn.assigns.user_role)]
  div[v-if="vuevar || serverVar"]
    | 客户端变量或服务端变量为真时显示
  div[v-if="vueRole === 'editor' || serverRole === 'admin'"]
    | 客户端角色为editor，或服务端角色为admin时显示

script.
  new Vue({
    el: '#app',
    data: {
      vuevar: false,
      vueRole: 'viewer',
      // 从data属性读取服务端变量，注意类型转换
      serverVar: Boolean(document.getElementById('app').dataset.serverVar),
      serverRole: JSON.parse(document.getElementById('app').dataset.serverRole)
    }
  })

这种方式的好处是模板更干净，所有逻辑都在Vue的客户端代码里处理，调试和维护起来也更方便。

内容的提问来源于stack exchange，提问作者lapinkoira