vue.js的template_vue mount

vue.js的template_vue mounttemplate定义内容模板<template>元素是一种用于保存客户端内容机制,该内容在加载页面时不会呈现。将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理<template>元素的内容,但这样做只是为了确保这些内容有效;但元素内容不会被渲染。说白了和inputtype=”hidden”类似,一个储存字符状态,一个储存代码片段js中使用IE完全不兼容,仅作为了解扩展!<tableid="producttable

template 定义

内容模板 <template> 元素是一种用于保存客户端内容机制,该内容在加载页面时不会呈现。
将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理<template>元素的内容,但这样做只是为了确保这些内容有效;但元素内容不会被渲染。

说白了和input type=”hidden” 类似,一个储存字符状态,一个储存代码片段

js 中使用

IE完全不兼容,仅作为了解扩展!

<table id="producttable"> <thead> <tr> <td>UPC_Code</td> <td>Product_Name</td> </tr> </thead> <tbody> <!-- 现有数据可以可选地包括在这里 --> </tbody> </table> <input type="hidden" name="" id="" value="123123" /> <template id="productrow"> <tr> <td class="record"></td> <td></td> </tr> </template> // 通过检查来测试浏览器是否支持HTML模板元素 // 用于保存模板元素的内容属性。 if ('content' in document.createElement('template')) { 
   
		debugger
		  // 使用现有的HTML tbody实例化表和该行与模板
		  let t = document.querySelector('#productrow'),
		  td = t.content.querySelectorAll("td");
		  td[0].textContent = "1235646565";
		  td[1].textContent = "Stuff";
		
		  // 克隆新行并将其插入表中
		  let tb = document.getElementsByTagName("tbody");
		  let clone = document.importNode(t.content, true);
		  tb[0].appendChild(clone);
		
		  // 创建一个新行
		  td[0].textContent = "0384928528";
		  td[1].textContent = "Acme Kidney Beans";
		
		  // 克隆新行并将其插入表中
		  let clone2 = document.importNode(t.content, true);
		  tb[0].appendChild(clone2);
		
		} else { 
   
		  // 找到另一种方法来添加行到表,因为不支持HTML模板元素。
		}
只听到从架构师办公室传来架构君的声音:
肃肃宵征,抱衾与裯。有谁来对上联或下联?

vue中使用

使用就可以配合使用v-for v-if来节约不必要的层级,来增加代码的可读性。
在vue中使用外层 的时候必须要嵌套一个根元素,否者报错。

此代码由Java架构师必看网-架构君整理
V-for的使用 <div class="asd" style="font-size: 0.5rem;"> <template v-for="item,index in people" > <div>测试{ {index}}</div> </template> </div> V-if的使用 为了具体的体现,我层级嵌套的比较多。 //男1 女0 <template v-for="(item,value) in people"> <view class="asd" style="font-size: 0.5rem;"> <template v-if="item.sex==1"> <view class="isBlue"> <template v-if="item.age<18"> { {item.name}}未成年 </template> <template v-else> { {item.name}}已成年 </template> </view> </template> <template v-else> <view class="isRed"> <template v-if="item.age<18"> { {item.name}}未成年 </template> <template v-else> { {item.name}}已成年 </template> </view> </template> </view> </template>
本文来源sani_x,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/166203
0
 

发表评论