html语法模板,(原创)html模板语法简单的实现

window.globel = {};

function getfn(sfn, SelfHTMLElement) {

var cglobel = {

SelfHTMLElement: SelfHTMLElement

},

Sreturn;

for (var i in (window.globel))

cglobel[i] = window.globel[i];

console.log(cglobel)

try {

Sreturn = new Function(sfn).bind(cglobel);

} catch (error) {

Sreturn = 'Error(\'' + error + '\')';

}

return Sreturn;

}

function running(tab) {

tab.innerHTML = tab.innerHTML.replace(/\$\{(.*?)\}$/gms, function(event) {

var fn = getfn(event.replace(/\$\{(.*?)\}$/gms, '$1'), tab),

rbreak;

if (typeof fn === 'function')

rbreak = fn() || '';

else

rbreak = fn;

return rbreak;

});

}

function runningArray(tabArr) {

for (var i = 0; i < tabArr.length; i++)

running(tabArr[i]);

}

var h = document.head;

var b = document.body;

runningArray(document.querySelectorAll('.module'));

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML可以使用模板语法来动态生成内容,常见的模板语法有以下几种: 1. 使用Mustache.js:Mustache.js是一个简单模板引擎,它可以在HTML中使用{{}}语法来引用变量,例如: ```html <div> <h1>{{title}}</h1> <p>{{content}}</p> </div> ``` 然后使用JavaScript动态替换变量,例如: ```javascript var data = { title: "Hello World", content: "This is a template example." }; var template = document.getElementById("template").innerHTML; var html = Mustache.render(template, data); document.getElementById("output").innerHTML = html; ``` 2. 使用Vue.js:Vue.js是一个流行的JavaScript框架,它可以在HTML中使用{{}}语法和v-bind等指令来动态生成内容,例如: ```html <div id="app"> <h1>{{title}}</h1> <p v-bind:class="{'red': isRed}">{{content}}</p> </div> ``` 然后使用Vue.js实例来绑定数据和操作,例如: ```javascript var app = new Vue({ el: "#app", data: { title: "Hello World", content: "This is a template example.", isRed: true } }); ``` 3. 使用AngularJS:AngularJS是另一个流行的JavaScript框架,它可以在HTML中使用{{}}语法和ng-bind等指令来动态生成内容,例如: ```html <div ng-app="myApp" ng-controller="myController"> <h1>{{title}}</h1> <p ng-class="{red: isRed}">{{content}}</p> </div> ``` 然后使用AngularJS控制器来绑定数据和操作,例如: ```javascript var app = angular.module("myApp", []); app.controller("myController", function($scope) { $scope.title = "Hello World"; $scope.content = "This is a template example."; $scope.isRed = true; }); ``` 以上三种方法都可以使用模板语法来动态生成HTML内容,可以根据具体情况选择使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值