模板引擎的使用及簡潔原生的判斷循環語法使用

1.引入模板引擎 <script src="./lib/jquery.js"></script> 記得引用jQuery

<script src="./lib/template-web copy.js"></script>

2.定義模板 + 定義模板id 要在script標簽中

<script type="text/html" id="mb"><p>姓名是：{{name}}</p><li>年齡是：{{age}}</li><h3>性別是：{{sex}}</h3><span><!-- 使用簡潔語法判斷年齡 -->{{if age ==18}}年齡為:{{age}}{{else if age >20}}年齡為:{{age1}}{{else}}年齡為:{{age2}}{{/if}}</span><p><!-- 使用原生語法判斷年齡 --><% if(age>23){%>年齡是：{{age2}}<% }else{ %>年齡是：{{age}}<%}%></p><p><!-- 使用簡潔循環語法 -->{{each hobby}} 這是：{{$index}} 愛好是：{{$value}} <br>{{/each}}</p><p><!-- 使用原生循環語法 --><% for(var i=0;i < newArray.length;i++){ %><%=newArray[i]%><% } %></p> </script>

3.定義數據

let obj = {name: 'zs',age: 23,age1: 21,age2: 30,sex: '男',hobby: {one: '籃球',two: '唱歌',three: '跳舞'},newArray: ['吃飯', '睡覺', '打豆豆']}

4.填入數據 調用函數template 注意template返回的是html格式的字符串 要定義一個變量去接收

// template()里面有兩個參數 第一個參數是模板id ，第二個是對象let str = template('mb', obj)

5.渲染頁面(使用jQuery語法獲取父級元素div)

$('.box').html(str)

注意點：使用數據的時候不能寫{{obj.name}}，只能使用obj里面的數據，除非obj里面還有個obj對象

頁面效果圖如下：

總結

以上是生活随笔為你收集整理的模板引擎的使用及简洁原生的判断循环语法使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。