:if标签:
完成类似java的if else的功能:
马克- to-win:马克 java社区:防盗版实名手机尾号: 73203。
例 2.2.2
<%@ page contentType="text/html; charset=GBK"%>
<!--看看如何完成if else的功能。$就是计算一下的意思。
-->
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page import="java.util.*"%>
<html>
<body>
<c:set var="age" value="13"></c:set>
<c:if test="${age<12}">
你是小学生
</c:if>
<c:if test="${18>age&&age>12}">
你是中学生
</c:if>
<c:if test="${age>18}">
你高于中学生
</c:if>
</body>
</html>
运行jsp后,浏览器中输出结果是:
你是中学生
篇幅有限更多请见扩展链接:http://www.mark-to-win.com/tutorial/jsp_5_cifExample.html
家好,html模板的判断语句和Python里的写法是一样的,只不过每一行需要包裹在花括号和百分号里。
·从视图函数里传递一个名称为user的数据,user变量的值输入小铁,在html文件里判断。如果user返回了数据显示欢迎你小铁,否则如果没有显示数据显示请登录。
·最后用and if来闭合判断语句,运行Web服务,在浏览器里查看效果。因为user这个变量是有数据的,所以前端显示的欢迎您小铁。将user变量的值改成无,回到浏览器查看效果,这个时候浏览器显示的是请登录。
这就是html模板文件里if判断语句的使用方法。
于parseHTML函数代码实在过于庞大,我这里就不一次性贴出源代码了,大家可以前往(https://github.com/vuejs/vue/blob/dev/src/compiler/parser/html-parser.js)查看源代码。
我们来总结一下该函数的主要功能:
1、匹配标签的 "<" 字符
匹配的标签名称不能是:script、style、textarea
有如下情况:
1、注释标签 /^<!\--/
2、条件注释 /^<!\[/
3、html文档头部 /^<!DOCTYPE [^>]+>/i
4、标签结束 /^<\/ 开头
5、标签开始 /^</ 开头
然后开始匹配标签的属性包括w3的标准属性(id、class)或者自定义的任何属性,以及vue的指令(v-、:、@)等,直到匹配到 "/>" 标签的结尾。然后把已匹配的从字符串中删除,一直 while 循环匹配。
解析开始标签函数代码:
function parseStartTag () {
// 标签的开始 如<div
const start=html.match(startTagOpen)
if (start) {
const match={
tagName: start[1], // 标签名称
attrs: [], // 标签属性
start: index // 开始位置
}
// 减去已匹配的长度
advance(start[0].length)
let end, attr
while (!(end=html.match(startTagClose)) && (attr=html.match(dynamicArgAttribute) || html.match(attribute))) {
attr.start=index
v
advance(attr[0].length)
attr.end=index
match.attrs.push(attr) // 把匹配到的属性添加到attrs数组
}
if (end) { // 标签的结束符 ">"
match.unarySlash=end[1]
advance(end[0].length) // 减去已匹配的长度
match.end=index // 结束位置
return match
}
}
}
处理过后结构如下:
接下来就是处理组合属性,调用 “handleStartTag” 函数
function handleStartTag (match) {
const tagName=match.tagName // 标签名称
const unarySlash=match.unarySlash // 一元标签
if (expectHTML) {
if (lastTag==='p' && isNonPhrasingTag(tagName)) {
// 解析标签结束
parseEndTag(lastTag)
}
if (canBeLeftOpenTag(tagName) && lastTag===tagName) {
parseEndTag(tagName)
}
}
// 是否为一元标签
const unary=isUnaryTag(tagName) || !!unarySlash
const l=match.attrs.length
// 标签属性集合
const attrs=new Array(l)
for (let i=0; i < l; i++) {
const args=match.attrs[i]
const value=args[3] || args[4] || args[5] || ''
const shouldDecodeNewlines=tagName==='a' && args[1]==='href' ? options.shouldDecodeNewlinesForHref : options.shouldDecodeNewlines
attrs[i]={
name: args[1], // 属性名称
value: decodeAttr(value, shouldDecodeNewlines) // 属性值
}
if (process.env.NODE_ENV !=='production' && options.outputSourceRange) {
// 开始位置
attrs[i].start=args.start + args[0].match(/^\s*/).length
// 结束位置
attrs[i].end=args.end
}
}
if (!unary) {
stack.push({ tag: tagName, lowerCasedTag: tagName.toLowerCase(), attrs: attrs, start: match.start, end: match.end })
lastTag=tagName
}
// 调用start函数
if (options.start) {
options.start(tagName, attrs, unary, match.start, match.end)
}
}
我们简单说一下最后调用的start函数的作用:
1、判断是否为svg标签,并处理svg在ie下的兼容性问题
2、遍历标签属性,验证其名称是否有效
3、标签名是否为 style 或者 script ,如果在服务端会提示warn警告
4、检查属性是否存在 v-for、v-if、v-once指令
5、如果是更元素就验证其合法性,不能是 slot 和 template 标签,不能存在 v-for指令
以上就是界面html模板的开始标签的分析,接下来我们来分析如何匹配结束标签。
请看:Vue源码全面解析三十 parseHTML函数(解析html(二)结束标签)
如有错误,欢迎指正,谢谢。
*请认真填写需求信息,我们会在24小时内与您取得联系。