Question

我试图让我的头部围绕模板引擎，以及是否有适合我要求的东西。

我想指定HTML并在HTML本身内提供动态功能。例如，假设我在页面上有一个复选框

<label><input type="checkbox" id="cbox1" value="first_checkbox"> This is my checkbox</label>

我想在HTML中指定逻辑，这样只有在选中该复选框后才会显示更多内容，例如

// if #cbox1.checked == true
    <h1>The check box is checked</h1>
// else
   <h1>The check box is not checked</h1>
// end

现在，liquid可能会用于提供基于数据存储的动态功能。因此，使用相同的液体语法使表单动态化也很好（即在上面的if条件中使用液体语法）。

是否可以编写一个＆＃39; js引擎＆＃39;，也许使用jquery，我可以包含在我的网页中，这将允许我使用液体语法但绑定到＆＃39; js中的变量发动机＆＃39;以及使我的内容动态的数据存储？

或者，有更好的方法吗？

Answer 1

我建议使用Vue.js（https://vuejs.org/）。

模板引擎非常易于学习，并提供您提到的所有功能。

以下是您的方案的一个工作示例：

https://jsbin.com/kikaxecogo/edit?html,output

但你需要做的就是初始化Vue：

new Vue({
  el: '#app',
  data: {
    showData: false
  }
});

并编写模板数据：

 <input type="checkbox" v-model="showData">

 <div v-if="showData">
   This is visible using v-if
 </div>

 <div v-else>
    The check box is not checked
 </div>

我在这里写了一篇关于Vue.js的介绍指南https://steveedson.co.uk/vuejs-intro/

您还可以绑定到其他文本输入，来自ajax源的数据等：

<input type="text" v-model="name">

<p>Hello {{ name }}</p>

一切都会自动更新。

作为Vue.js的替代方案，还有：

HTML模板引擎和液体

1 个答案: