EL用法详解

1.EL 表达式概述

EL(Express Lanuage)表达式可以嵌入在jsp页面内部,减少jsp脚本的编写,EL出现的目的是要替代jsp页面中脚本的编写。

2.EL从域中取出数据(EL最重要的作用)

jsp脚本:<%=request.getAttribute(name)%>
EL表达式替代上面的脚本:${requestScope.name}
在这里插入图片描述
EL最主要的作用是获得四大域中的数据,格式${EL表达式}
EL获得pageContext域中的值:${pageScope.key}; pageContext域是pageScope 而不是pageContextScope
EL获得request域中的值:${requestScope.key};
EL获得session域中的值:${sessionScope.key};
EL获得application域中的值:${applicationScope.key};
**在这里插入图片描述
EL从四个域中获得某个值${key};
—同样是依次从pageContext域,request域,session域,application域中获取属性,在某个域中获取后将不在向后寻找

1)获得普通字符串
<%
request.setAttribute("name", "张三");
%>
${name }
2)获得User对象的值
在这里插入图片描述

3)获得List的值
在这里插入图片描述
下标从0开始

3.EL的内置对象(11个)

pageScope/requestScope/sessionScope/applicationScope ---- 获取JSP中域中的数据
param,paramValues - 接收参数. 相当于request.getParameter() 和 request.getParameterValues()
在这里插入图片描述
header,headerValues - 获取请求头信息相当于request.getHeader(name)
在这里插入图片描述
initParam - 获取全局初始化参数
相当于this.getServletContext().getInitParameter(name)
在这里插入图片描述
在这里插入图片描述
cookie -WEB开发中cookie
相当于request.getCookies()---cookie.getName()---cookie.getValue()
在这里插入图片描述
在这里插入图片描述
pageContext - WEB开发中的pageContext. pageContext获得其他八大对象
这里可以获得request对象 在EL内置对象没有Request对象,只有RequestScope域对象

${pageContext.request.contextPath} 相当于
<%=pageContext.getRequest().getContextPath%> 这句代码不能实现 获得WEB应用的名称
因为getRequest()是获得的ServletRequest() 而没有获取ContextPath这个方法
EL表达式获取的HTTPServletRequest() 有获取ContextPath这个方法

主要用法就是获取Web应用的名称 这样修改Web应用名称也不需要改动
在这里插入图片描述

4.EL执行表达式

例如: ${1+1} 结果为 2
${empty user} 看user是否为空 看的是域里面是否为空 这里为false
在这里插入图片描述
${user==null?true:false}

  • 5
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: el-autocomplete 是 element-ui 中的一个自动完成组件。 使用方法: 1. 安装 element-ui 2. 在项目中引入 el-autocomplete 组件 3. 使用 v-model 指令绑定输入框的值 4. 使用 :fetch-suggestions 属性绑定获取建议列表的方法,该方法需要返回一个 Promise 对象 5. 使用 v-on:select 事件绑定点击建议项的回调函数 6. 可以使用 props 属性自定义输入框的样式、建议项的样式等 示例代码: ``` <template> <el-autocomplete v-model="inputValue" :fetch-suggestions="querySearch" @select="handleSelect" placeholder="请输入内容" > </el-autocomplete> </template> <script> export default { data() { return { inputValue: '', }; }, methods: { querySearch(queryString) { return new Promise((resolve) => { setTimeout(() => { resolve(['vue', 'javascript', 'css', 'html', 'element-ui'].filter(item => item.includes(queryString))); }, 200); }); }, handleSelect(item) { console.log(item); }, }, }; </script> ``` 详细的使用方法可以参考 element-ui 的官网说明: https://element.eleme.cn/#/zh-CN/component/autocomplete ### 回答2: el-autocomplete是Element-UI中的一款自动完成组件,可用来快速搜索并选择一项或多项数据。 使用el-autocomplete前需要先在Vue组件中导入element-ui的库 ```javascript import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` el-autocomplete使用步骤如下: 1、在template中添加el-autocomplete组件 ```html <el-autocomplete v-model="value" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect"></el-autocomplete> ``` 其中v-model绑定输入框的输入值;fetch-suggestions绑定搜索方法;placeholder为占位符;select绑定选择方法。 2、在data中定义value和suggestions ```javascript data() { return { value: '', suggestions: [] }; }, ``` value为输入框输入的值,suggestions为搜索结果。 3、在methods中编写querySearch方法 ```javascript querySearch(queryString, cb) { var restaurants = ['北京烤鸭', '上海生煎', '广东粥', '重庆火锅', '四川麻辣烫']; var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants; // 调用 callback 返回建议列表的数据 cb(results); }, createFilter(queryString) { return (restaurant) => { return (restaurant.toLowerCase().indexOf(queryString.toLowerCase()) === 0); }; }, ``` 其中,queryString为输入框的输入值,cb为返回搜索结果的回调函数。将搜索结果赋值给suggestions。 createFilter为一个自定义的过滤函数,用于过滤出包含queryString的搜索结果。 4、在methods中编写handleSelect方法 ```javascript handleSelect(item) { console.log(item); }, ``` 将选中项的值打印出来。 至此,一个简单的el-autocomplete已经完成,可以搜索并选择一项数据。 还可以通过设置props来增加组件的功能: 1、设置props的multiple为true可以实现多选功能: ```html <el-autocomplete v-model="value" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect" :multiple="true"></el-autocomplete> ``` 2、设置props的prefix-icon和suffix-icon为图标可以美化输入框: ```html <el-autocomplete v-model="value" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect" :prefix-icon="searchIcon" :suffix-icon="loadingIcon"></el-autocomplete> ``` 其中,searchIcon和loadingIcon为自定义的图标。 3、设置props的debounce为节流时间,可以控制延迟搜索的时间: ```html <el-autocomplete v-model="value" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect" :debounce="500"></el-autocomplete> ``` 在这里,表明了el-autocomplete的使用方法及使用该组件可以实现的一些效果,开发人员可以通过了解该组件提供的功能和方法来根据自己的实际项目需求进行修改和使用,从而为用户提供更好的交互体验。 ### 回答3: el-autocomplete是Element UI框架中的一个自动补全组件。它可以接受用户输入的内容,并在一个预设的数据源中进行匹配,从而展示出匹配的结果供用户选择。在实现搜索框、标签输入、下拉选择等场景中都可以使用该组件。 el-autocomplete组件的使用步骤如下: 1.引入组件: ``` import { Autocomplete } from 'element-ui'; ``` 2.注册组件: ``` components: { Autocomplete } ``` 3.在HTML页面中使用组件: ``` <el-autocomplete v-model="value" :fetch-suggestions="querySearch" placeholder="请输入内容"></el-autocomplete> ``` 其中,v-model用于双向数据绑定,将用户实际输入的内容绑定到data中的value属性上。fetch-suggestions是重要的属性,它可以接受一个方法,该方法将返回匹配的结果。 4.在data中定义value属性及querySearch方法: ``` data() { return { value: '', data: ['Java', 'JavaScript', 'Python', 'HTML', 'CSS'] }; }, methods: { querySearch(queryString, callback) { let suggestions = []; if (queryString) { suggestions = this.data.filter(item => { return item.toLowerCase().indexOf(queryString.toLowerCase()) !== -1; }); } callback(suggestions); } } ``` 以上代码中,value属性用于保存用户实际输入的内容,data数组是用来存储预设数据源的。querySearch方法将用户输入的内容queryString与data中的每个元素进行匹配,如果匹配成功,则将匹配的元素添加到suggestions数组中,最后调用callback将匹配的结果返回。 el-autocomplete组件还提供了多种自定义的属性,比如:suggestion-template,用于自定义展示结果的模板;value-key,用于指定使用哪个字段作为结果的value值等等。这些自定义属性可以根据实际需要进行使用。 最后,需要注意的是,el-autocomplete并不能和form组件进行直接绑定,需要通过监听value的变化来实现form表单的提交。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值