Javascript HTML模板引擎和液体

我正在试着了解模板引擎，看看是否有适合我的需求的东西

我想指定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

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

是否有可能使用jquery编写一个“js引擎”，我可以将其包含在我的网页中，允许我使用流畅的语法，但绑定到“js引擎”以及数据存储中的变量，以使我的内容具有动态性

---

或者，有更好的方法吗？

我建议使用Vue.js

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

以下是您的场景的工作示例：

但您只需初始化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的介绍指南

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

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

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

一切都会自动更新

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

---

对看起来很有希望：我正在复习，但只是觉得我需要一些更轻的东西。Vue看起来使用起来更简单。我个人认为Vue非常优秀。它对于这样的小示例非常有效，但可以随着项目的发展而增长，并可用于大规模web应用程序。祝你好运在过去的4年里，我一直在一个项目中使用angularjs，开源开发人员的支持也非常强大，它的重量非常轻，很多事情都很容易实现。