快速入门template.js

template.js是javascript模板引擎，很多时候在ajax请求数据渲染页面，个人感觉用了这个非常方便

首先得引入template.js

<div id="box"></div>
<script src="template.js"></script>

定义一个模板

<script type="template" id="tem1"></script>

ajax请求出数据后

$.ajax({url:'',type:'get',   dataType: 'json',success: function (data) {var list = template(`tem1`, data);$('#box').html(list);}})

模板遍历或者条件判断，里面index为索引

<script type="template" id="tem1">{{ each data as value index }}    <ul>{{if value.is_on == 0}}<li data-id={{value.id}}><p>{{value.name}}</p><p>{{value.age}}</p></li>{{else if value.is_on == 1}}..........此处省略{{/if}}</ul>{{ /each }}
</script>

你也可以这个标签上自定义属性，获取需要的值，当然也可以绑定onclick事件

快速入门template.js相关推荐

前端_快速入门Vue.js框架
文章目录快速入门Vue.js框架 0.前言 1.Vue.js框架 1.1.Vue简介 1.2.第一个Vue程序 1.3.el:挂载点 2.Vue指令 2.2.v-html 2.3.v-on 2.4. ...
第二节：简易安装和快速入门Vue.js
上一节我们介绍了Vue.js框架,这一节,我们可以来试着动手写点小代码了. 1 简易安装要使用Vue.js,我们得先把它安装到我们的项目中,说明了简易安装,我们讲解的肯定是最简单的方法,先不管那些高 ...
新手如何快速入门node.js
附Java/C/C++/机器学习/算法与数据结构/前端/安卓/Python/程序员必读书籍书单大全: 书单导航页(点击右侧极客侠栈即可打开个人博客):极客侠栈 ①[Java]学习之路吐血整理技术书 ...
uvex快速入门 Vue.js 应用程序开发的状态管理模式 + 库
参考视频 vue参考文档 VueX 大型项目管理公共数据的工具作用: 独立与组件系统之外的,状态管理工具,采用集中式存储管理所有的组件状态,解决多组件数据通信(跨组件通信 A组件修改数据其他组件都 ...
不会几个框架，都不好意思说搞过前端： Vue.js - 60分钟快速入门
Vue.js--60分钟快速入门 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的 ...
qq位置如何用启动百度地图定位服务器,腾讯位置服务API快速入门
前言之前项目有个需求,在网页上显示微信发送过来的位置信息,该开始想用百度地图,后来发现腾讯地图相对简单一点快速入门申请Key 引入js 把###替换成你申请的key 定义容器设置好宽高度设置 ...
vue.js快速入门
以前看到多少天学习系列,我都深感烦躁,短短几天怎么可以精通,那是对于他们而言.但是,今天我要写一个快速入门,本人觉得还是有一点用处,因为,我不可能在一天之内精通某种东西,却可以在一两小时入门. 回到v ...
2017 Vue.js 2快速入门指南
注意,据部分读者反映本文水多,怕湿身者勿进.后续推荐详解 Vue & Vuex 实践 2017 Vue.js 2快速入门指南翻译自Vue.js 2 Quickstart Tutorial 20 ...
vue.js的快速入门使用
1. vue.js的快速入门使用 1.1 vue.js库的下载 vue.js是目前前端web开发最流行的工具库,由尤雨溪在2014年2月发布的. 另外几个常见的工具库:react.js /angula ...

快速入门template.js

快速入门template.js相关推荐

最新文章

热门文章