javascript中的undefined,false,null,0,""操作

最新推荐文章于 2023-06-07 01:16:15 发布
原创 最新推荐文章于 2023-06-07 01:16:15 发布 · 324 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js #null/undefined/0/false

本文详细解析了JavaScript中null、undefined、0、false及空字符串在逻辑运算符（&&、||、&）、比较运算符（>、<、<=、>=）以及相等运算符（==、===）中的行为表现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

undefined 表示未经初始化的变量，null表示已经定义的变量没有赋值，0表示数值0，false表示逻辑上的错误，“”表示空字符串。

null,undefined,0,false,""
操作数    操作被操作数结果
null,undefined,0,false,""&&null,undefined,0,false,""操作数
null,undefined,0,false,""||null,undefined,0,false,""被操作数
null,undefined,0,false,""&null,undefined,0,false,""0
null,0,false+/*null,0,false0
null,0,false+/*undefinedNaN
undefined+/*null,0,falseNaN

>,<.<=,>=操作
操作数操作被操作数结果
null,undefined,0,false>null,undefined,0,falsefalse
null,undefined,0,false<null,undefined,0,falsefalse
null,0,false<=/>=null,0,falsetrue
undefined<=/>=undefinedtrue
null,0,false<=/>=undefinedfalse
undefined<=/>=null,0,falsefalse
    
    
== 与 ===
操作数操作被操作数结果
null,undefined==null,undefinedtrue
0,false==0,falsetrue
null,undefined==0,falsefalse
0,false== null,undefinedfalse
null,undefined,0,false===null,undefined,0,false当操作数与被操作数相同时为true否则为false
null, undefined,"",0,false是什么关系？
adohuato176516的博客
06-12 212
null本质上和0,"",false是一类东西，它们都表示一种数据类型的非值。正如0表示数字类型的非值，""表示字符类型的非值一样，null表示完全空的对象，即可以把它看成是对象类型的非值，没有任何属性的对象，（{}不是完全空的对象，因为它继承了Object.prototype的属性，有一些自带方法。扩展一点，其实null就是Object.prototype的prototype....）...
js里面null,0,"",false,undefined是否相等问题
it帝国的博客-辉
04-17 4423
最近遇到一个js相等问题，0==‘’ 答案居然是true，本人本来以为是false的。然后去网上查了一下。最近也去本地试一下，结果如下 对于相等的情况如上图，还有就是undefined、null、""、0、false这五个值在if语句中做判断，都会执行false分支
区分js中的false,undefined,““,0和null
阿飞的博客
02-02 1033
1.相同点：这五个值的共同点是，在if语句中做判断，都会执行false分支。当然从广义上来看，是说明这些数值都是其对应数据类型上的无效值或空值。还有这五个值作!运算，结果全为：true。 2.不同点：这几个值中也有不同，其中undefined和null比较特殊，虽然null的类型是object，但是null不具有任何对象的特性，就是说我们并不能执行null.toString()、null.constructor等对象实例的默认调用。所以从这个意义上来说，null和undefined有最大的相似性。看看nul
JavaScript中0, "", null, false, undefined的区别
极客神殿
09-04 1215
JavaScript中0, &amp;quot;&amp;quot;, null, false, undefined返回的Boolean类型均为false。然而它们所指的并不是同一个概念，需要加以区分。 首先先看一段代码： document.write(typeof(0)) //number document.write(typeof(&amp;quot;&amp;quot;)) //string document.write(typeo...
关于undefined、null、false、0、[]、{}详解
一个菜鸡
06-07 523
关于undefined、null、false、0、[]、{}详解
利用JScript中运算符&quot;||&quot;和&quot;&amp;&amp;&quot;的特殊特性实现代码精简第1/2页|angluo-javascript-34553.pdf
10-31
首先，`&amp;&amp;`运算符遵循“短路”行为，即如果左边的表达式为假（非对象、空字符串、`null`、`undefined`或`0`），则不会评估右边的表达式，而是直接返回左边的值，因为无论右边是什么，整个表达式的结果都会是假。...
javascript对HTML字符转义与反转义
11-26
= undefined) ? (temp.textContent = html) : (temp.innerText = html); var output = temp.innerHTML; temp = null; return output; } }; ``` - 正则表达式方法，通过正则匹配并替换特定字符： ```...
function kgsConvertValue(value) { return !value ? value : String(value).replace(/&amp;/g, &quot;&amp;&quot;).replace(/\&quot;/g, &quot;&quot;&quot;).replace(/</g, &quot;<&quot;).replace(/>/g, &quot;>&quot;); }
06-09
这是一个 JavaScript 函数，名为 kgsConvertValue，它的作用...如果参数 value 是 falsy 值，如 undefined、null、空字符串等，则直接返回该值。否则，将参数 value 转换为字符串，然后进行替换并返回转义后的字符串。
常用javascript案例大全
01-13
JavaScript 是一种广泛应用于 Web 开发中的脚本语言，下面是常用的 JavaScript 案例大全，包括原生 JavaScript 实现字符串长度截取、获取域名主机、清除空格、替换全部、转义 HTML 标签、还原 HTML 标签、时间日期...
比較mrviewer0.vue與mrviewer.vue，找出mrviewer.vue的錯誤之處： mrviewer0.vue： <template> <div class=&quot;container&quot;> <!-- 控制面板 --> <div class=&quot;control-panel&quot;> <button @click=&quot;fetchData&quot; class=&quot;refresh-btn&quot;>刷新數據</button> <button @click=&quot;toggleRelative&quot; class=&quot;relative-btn&quot;> {{ showRelative ? '病態關聯' : '病態關聯' }} </button> <!-- 本草关联器按钮 --> <button @click=&quot;toggleMNRelative&quot; class=&quot;relative-btn&quot;> {{ showMNRelative ? '本草關聯' : '本草關聯' }} </button> <!-- 方剂关联器按钮 --> <button @click=&quot;togglePNRelative&quot; class=&quot;relative-btn&quot;> {{ showPNRelative ? '方劑關聯' : '方劑關聯' }} </button> <!-- 出处关联器按钮 --> <button @click=&quot;toggleSNRelative&quot; class=&quot;relative-btn&quot;> {{ showSNRelative ? '典籍關聯' : '典籍關聯' }} </button> <!-- 新增人物关联器按钮 --> <button @click=&quot;toggleFNRelative&quot; class=&quot;relative-btn&quot;> {{ showFNRelative ? '人物關聯' : '人物關聯' }} </button> <input v-model=&quot;searchQuery&quot; placeholder=&quot;搜索...&quot; class=&quot;search-input&quot; /> <div class=&quot;pagination-controls&quot;> <span>每頁顯示:</span> <select v-model.number=&quot;pageSize&quot; class=&quot;page-size-select&quot;> <option value=&quot;1&quot;>1筆</option> <option value=&quot;4&quot;>4筆</option> <option value=&quot;10&quot;>10筆</option> </select> <button @click=&quot;prevPage&quot; :disabled=&quot;currentPage === 1&quot;>上一页</button> <span>第</span> <input type=&quot;number&quot; v-model.number=&quot;inputPage&quot; min=&quot;1&quot; :max=&quot;totalPages&quot; class=&quot;page-input&quot; @input=&quot;handlePageInput&quot;> <span>頁 / 共 {{ totalPages }} 頁</span> <button @click=&quot;nextPage&quot; :disabled=&quot;currentPage === totalPages&quot;>下一頁</button> <span>醫案閱讀器</span> </div> </div> <!-- 主内容区域 --> <div class=&quot;content-area&quot;> <div class=&quot;horizontal-records&quot; v-if=&quot;filteredData.length > 0&quot;> <div v-for=&quot;(item, index) in paginatedData&quot; :key=&quot;item.id&quot; class=&quot;record-card&quot;> <div class=&quot;record-header&quot;> <h3>醫案 #{{ (currentPage - 1) * pageSize + index + 1 }}</h3> </div> <div class=&quot;record-body&quot;> <div v-for=&quot;(value, key) in processFieldNames(item)&quot; :key=&quot;key&quot; class=&quot;record-field&quot;> <div class=&quot;field-name&quot;>{{ key }}:</div> <div class=&quot;field-value&quot;> <!-- 病态名称 --> <div v-if=&quot;key === '相關病態' &amp;&amp; Array.isArray(value)&quot; class=&quot;dntag-value&quot; v-html=&quot;formatDntagValueHTML(value)&quot;></div> <!-- 本草名称 --> <div v-else-if=&quot;key === '相關本草' &amp;&amp; Array.isArray(value)&quot; class=&quot;mntag-value&quot; v-html=&quot;formatMntagValueHTML(value)&quot;></div> <!-- 方剂名称 --> <div v-else-if=&quot;key === '相關方劑' &amp;&amp; Array.isArray(value)&quot; class=&quot;pntag-value&quot; v-html=&quot;formatPntagValueHTML(value)&quot;></div> <!-- 出处名称 --> <div v-else-if=&quot;key === '相關典籍' &amp;&amp; Array.isArray(value)&quot; class=&quot;sntag-value&quot; v-html=&quot;formatSntagValueHTML(value)&quot;></div> <!-- 新增人物名称 --> <div v-else-if=&quot;key === '相關人物' &amp;&amp; Array.isArray(value)&quot; class=&quot;fntag-value&quot; v-html=&quot;formatFntagValueHTML(value)&quot;></div> <div v-else-if=&quot;Array.isArray(value)&quot; class=&quot;array-value&quot;> <span v-for=&quot;(subItem, subIndex) in value&quot; :key=&quot;subIndex&quot;> <span v-html=&quot;formatValue(subItem, key)&quot;></span><span v-if=&quot;subIndex < value.length - 1&quot;>；</span> </span> </div> <div v-else v-html=&quot;formatValue(value, key)&quot;></div> </div> </div> </div> </div> </div> <div v-else class=&quot;no-data&quot;> 沒有找到匹配的數據 </div> </div> <!-- 相关区域 --> <div class=&quot;relative-area&quot;> <mrdnrelate v-if=&quot;showRelative&quot; :currentCase=&quot;currentCase&quot; :allTags=&quot;api2Data&quot; @data-updated=&quot;handleDataUpdated&quot;></mrdnrelate> <!-- 本草关联器 --> <mrmnrelate v-else-if=&quot;showMNRelative&quot; :currentCase=&quot;currentCase&quot; :allTags=&quot;api3Data&quot; @data-updated=&quot;handleDataUpdated&quot;></mrmnrelate> <!-- 方剂关联器 --> <mrpnrelate v-else-if=&quot;showPNRelative&quot; :currentCase=&quot;currentCase&quot; :allTags=&quot;api5Data&quot; @data-updated=&quot;handleDataUpdated&quot;></mrpnrelate> <!-- 出处关联器 --> <mrsnrelate v-else-if=&quot;showSNRelative&quot; :currentCase=&quot;currentCase&quot; :allTags=&quot;api4Data&quot; @data-updated=&quot;handleDataUpdated&quot;></mrsnrelate> <!-- 新增人物关联器 --> <mrfnrelate v-else-if=&quot;showFNRelative&quot; :currentCase=&quot;currentCase&quot; :allTags=&quot;api6Data&quot; @data-updated=&quot;handleDataUpdated&quot;></mrfnrelate> <span v-else>點按下方關聯器，顯示醫案相關專有名詞</span> </div> </div> </template> <script> import mrdnrelate from './mrdnrelate.vue'; import mrmnrelate from './mrmnrelate.vue'; import mrpnrelate from './mrpnrelate.vue'; // 导入方剂关联器组件 import mrsnrelate from './mrsnrelate.vue'; import mrfnrelate from './mrfnrelate.vue'; // 导入新增的人物关联器组件 export default { name: 'mrviewer', components: { mrdnrelate, mrmnrelate, mrpnrelate, mrsnrelate, mrfnrelate }, data() { return { api1Data: [], api2Data: [], api3Data: [], // 本草标签数据 api4Data: [], // 出处标签数据 api5Data: [], // 方剂标签数据 api6Data: [], // 新增人物标签数据 mergedData: [], currentPage: 1, pageSize: 1, searchQuery: '', sortKey: '', sortOrders: {}, inputPage: 1, fieldNames: { 'mrcase': '醫案全文', 'mrorigin': '醫案出處', 'mrdoctor': '醫案醫者', 'mrname': '醫案命名', 'mrposter': '醫案提交者', 'mrlasttime': '最後編輯時間', 'mreditnumber': '編輯次數', 'mrreadnumber': '閱讀次數', 'mrpriority': '重要性', 'dntag': '相關病態', 'mntag': '相關本草', 'pntag': '相關方劑', 'sntag': '相關典籍', 'fntag': '相關人物' // 新增人物字段 }, inputTimeout: null, dnNames: [], mnNames: [], // 本草名称列表 pnNames: [], // 方剂名称列表 snNames: [], // 出处名称列表 fnNames: [], // 新增人物名称列表 stateVersion: '1.0', showRelative: false, showMNRelative: false, // 控制本草关联器显示 showPNRelative: false, // 控制方剂关联器显示 showSNRelative: false, // 控制出处关联器显示 showFNRelative: false, // 新增控制人物关联器显示 currentCase: null }; }, computed: { filteredData() { const query = this.searchQuery.trim(); if (query &amp;&amp; /^\d+$/.test(query)) { const idToSearch = parseInt(query, 10); return this.mergedData.filter(item => item.id === idToSearch); } if (!query) return this.mergedData; const lowerQuery = query.toLowerCase(); return this.mergedData.filter(item => { return Object.values(item).some(value => { if (value === null || value === undefined) return false; if (Array.isArray(value)) { return value.some(subValue => { if (typeof subValue === 'object' &amp;&amp; subValue !== null) { return JSON.stringify(subValue).toLowerCase().includes(lowerQuery); } return String(subValue).toLowerCase().includes(lowerQuery); }); } if (typeof value === 'object' &amp;&amp; value !== null) { return JSON.stringify(value).toLowerCase().includes(lowerQuery); } return String(value).toLowerCase().includes(lowerQuery); }); }); }, sortedData() { if (!this.sortKey) return this.filteredData; const order = this.sortOrders[this.sortKey] || 1; return [...this.filteredData].sort((a, b) => { const getValue = (obj) => { const val = obj[this.sortKey]; if (Array.isArray(val)) return JSON.stringify(val); return val; }; const aValue = getValue(a); const bValue = getValue(b); if (aValue === bValue) return 0; return aValue > bValue ? order : -order; }); }, paginatedData() { const start = (this.currentPage - 1) * Number(this.pageSize); const end = start + Number(this.pageSize); const data = this.sortedData.slice(start, end); // 更新当前医案完整数据 if (data.length > 0) { this.currentCase = data[0]; } else { this.currentCase = null; } return data; }, totalPages() { return Math.ceil(this.filteredData.length / this.pageSize) || 1; } }, watch: { pageSize() { this.currentPage = 1; this.inputPage = 1; this.saveState(); }, currentPage(newVal) { this.inputPage = newVal; this.saveState(); }, filteredData() { if (this.currentPage > this.totalPages) { this.currentPage = Math.max(1, this.totalPages); } this.inputPage = this.currentPage; }, searchQuery() { this.saveState(); } }, methods: { // 处理数据更新事件 handleDataUpdated() { // 显示操作成功的提示 alert('數據已更新，正在刷新醫案數據...'); // 刷新数据 this.fetchData(); }, // 本草关联器切换方法 toggleMNRelative() { if (!this.showMNRelative) { this.showRelative = false; this.showPNRelative = false; this.showSNRelative = false; this.showFNRelative = false; } this.showMNRelative = !this.showMNRelative; }, // 方剂关联器切换方法 togglePNRelative() { if (!this.showPNRelative) { this.showRelative = false; this.showMNRelative = false; this.showSNRelative = false; this.showFNRelative = false; } this.showPNRelative = !this.showPNRelative; }, // 出处关联器切换方法 toggleSNRelative() { if (!this.showSNRelative) { this.showRelative = false; this.showMNRelative = false; this.showPNRelative = false; this.showFNRelative = false; } this.showSNRelative = !this.showSNRelative; }, // 病态关联器切换方法 toggleRelative() { if (this.showRelative) { this.showRelative = false; } else { this.showMNRelative = false; this.showPNRelative = false; this.showSNRelative = false; this.showFNRelative = false; this.showRelative = true; } }, // 新增人物关联器切换方法 toggleFNRelative() { if (!this.showFNRelative) { this.showRelative = false; this.showMNRelative = false; this.showPNRelative = false; this.showSNRelative = false; } this.showFNRelative = !this.showFNRelative; }, // 病态名称HTML格式化方法 (使用橙色) formatDntagValueHTML(dntagArray) { return dntagArray.map(tagObj => { const name = tagObj.dnname || tagObj.name || '未命名標籤'; return `<span style=&quot;color: rgb(212, 107, 8); font-weight: bold;&quot;>${this.escapeHtml(name)}</span>`; }).join('；'); }, // 本草名称HTML格式化方法 (使用绿色) formatMntagValueHTML(mntagArray) { return mntagArray.map(tagObj => { const name = tagObj.mnname || tagObj.name || '未命名標籤'; return `<span style=&quot;color: rgb(0, 128, 0); font-weight: bold;&quot;>${this.escapeHtml(name)}</span>`; }).join('；'); }, // 方剂名称HTML格式化方法 (使用紫色) formatPntagValueHTML(pntagArray) { return pntagArray.map(tagObj => { const name = tagObj.pnname || tagObj.name || '未命名標籤'; return `<span style=&quot;color: rgb(128, 0, 128); font-weight: bold;&quot;>${this.escapeHtml(name)}</span>`; }).join('；'); }, // 出处名称HTML格式化方法 (使用蓝色) formatSntagValueHTML(sntagArray) { return sntagArray.map(tagObj => { const name = tagObj.snname || tagObj.name || '未命名標籤'; return `<span style=&quot;color: rgb(51, 102, 255); font-weight: bold;&quot;>${this.escapeHtml(name)}</span>`; }).join('；'); }, // 新增人物名称HTML格式化方法 (使用棕色) formatFntagValueHTML(fntagArray) { return fntagArray.map(tagObj => { const name = tagObj.fnname || tagObj.name || '未命名標籤'; return `<span style=&quot;color: #8B4513; font-weight: bold;&quot;>${this.escapeHtml(name)}</span>`; }).join('；'); }, // HTML转义方法防止XSS攻击 escapeHtml(text) { const map = { '&amp;': '&amp;', '<': '<', '>': '>', '&quot;': '&quot;', &quot;'&quot;: ''' }; return text.replace(/[&amp;<>&quot;']/g, m => map[m]); }, saveState() { const state = { version: this.stateVersion, currentPage: this.currentPage, pageSize: this.pageSize, searchQuery: this.searchQuery, timestamp: new Date().getTime() }; sessionStorage.setItem('mrviewerState', JSON.stringify(state)); }, restoreState() { const savedState = sessionStorage.getItem('mrviewerState'); if (!savedState) return; try { const state = JSON.parse(savedState); if (state.version !== this.stateVersion) return; this.currentPage = state.currentPage || 1; this.pageSize = state.pageSize || 1; this.searchQuery = state.searchQuery || ''; this.inputPage = this.currentPage; } catch (e) { sessionStorage.removeItem('mrviewerState'); } }, clearState() { sessionStorage.removeItem('mrviewerState'); }, async fetchData() { try { // 获取原有数据 const api1Response = await fetch(&quot;MRInfo/?format=json&quot;); this.api1Data = await api1Response.json(); const api2Response = await fetch(&quot;DNTag/?format=json&quot;); this.api2Data = await api2Response.json(); // 本草数据获取 const api3Response = await fetch(&quot;MNTag/?format=json&quot;); this.api3Data = await api3Response.json(); // 方剂数据获取 const api5Response = await fetch(&quot;PNTag/?format=json&quot;); this.api5Data = await api5Response.json(); // 出处数据获取 const api4Response = await fetch(&quot;SNTag/?format=json&quot;); this.api4Data = await api4Response.json(); // 新增人物数据获取 const api6Response = await fetch(&quot;FNTag/?format=json&quot;); this.api6Data = await api6Response.json(); // 本草名称列表 this.mnNames = this.api3Data.map(item => item.mnname).filter(name => name &amp;&amp; name.trim()); this.mnNames.sort((a, b) => b.length - a.length); // 方剂名称列表 this.pnNames = this.api5Data.map(item => item.pnname).filter(name => name &amp;&amp; name.trim()); this.pnNames.sort((a, b) => b.length - a.length); // 病态名称列表 this.dnNames = this.api2Data.map(item => item.dnname).filter(name => name &amp;&amp; name.trim()); this.dnNames.sort((a, b) => b.length - a.length); // 出处名称列表 this.snNames = this.api4Data.map(item => item.snname).filter(name => name &amp;&amp; name.trim()); this.snNames.sort((a, b) => b.length - a.length); // 新增人物名称列表 this.fnNames = this.api6Data.map(item => item.fnname).filter(name => name &amp;&amp; name.trim()); this.fnNames.sort((a, b) => b.length - a.length); this.mergeData(); this.currentPage = 1; this.inputPage = 1; this.saveState(); } catch (error) { console.error(&quot;獲取數據失敗:&quot;, error); alert(&quot;數據加載失敗，請稍後重試&quot;); } }, mergeData() { this.mergedData = this.api1Data.map((item) => { const newItem = { ...item }; // 处理病态标签 if (newItem.dntag &amp;&amp; Array.isArray(newItem.dntag)) { newItem.dntag = newItem.dntag.map((tagId) => { const matchedItem = this.api2Data.find(api2Item => api2Item.id === tagId); return matchedItem || { id: tagId, dnname: &quot;未找到匹配的數據&quot; }; }); } // 处理本草标签 if (newItem.mntag &amp;&amp; Array.isArray(newItem.mntag)) { newItem.mntag = newItem.mntag.map((tagId) => { const matchedItem = this.api3Data.find(api3Item => api3Item.id === tagId); return matchedItem || { id: tagId, mnname: &quot;未找到匹配的數據&quot; }; }); } // 处理方剂标签 if (newItem.pntag &amp;&amp; Array.isArray(newItem.pntag)) { newItem.pntag = newItem.pntag.map((tagId) => { const matchedItem = this.api5Data.find(api5Item => api5Item.id === tagId); return matchedItem || { id: tagId, pnname: &quot;未找到匹配的數據&quot; }; }); } // 处理出处标签 if (newItem.sntag &amp;&amp; Array.isArray(newItem.sntag)) { newItem.sntag = newItem.sntag.map((tagId) => { const matchedItem = this.api4Data.find(api4Item => api4Item.id === tagId); return matchedItem || { id: tagId, snname: &quot;未找到匹配的數據&quot; }; }); } // 新增处理人物标签 if (newItem.fntag &amp;&amp; Array.isArray(newItem.fntag)) { newItem.fntag = newItem.fntag.map((tagId) => { const matchedItem = this.api6Data.find(api6Item => api6Item.id === tagId); return matchedItem || { id: tagId, fnname: &quot;未找到匹配的數據&quot; }; }); } return newItem; }); // 初始化排序顺序 this.sortOrders = {}; if (this.mergedData.length > 0) { Object.keys(this.mergedData[0]).forEach(key => { this.sortOrders[key] = 1; }); } }, processFieldNames(item) { const result = {}; for (const key in item) { const newKey = this.fieldNames[key] || key; result[newKey] = item[key]; } return result; }, formatValue(value, fieldName) { if (value === null || value === undefined) return ''; // 醫案全文的高亮（保持不变） if (fieldName === '醫案全文' &amp;&amp; typeof value === 'string') { let highlighted = this.highlightMatches(value, this.dnNames, 'rgb(212, 107, 8)'); highlighted = this.highlightMatches(highlighted, this.mnNames, 'rgb(0, 128, 0)'); highlighted = this.highlightMatches(highlighted, this.pnNames, 'rgb(128, 0, 128)'); highlighted = this.highlightMatches(highlighted, this.snNames, 'rgb(51, 102, 255)'); highlighted = this.highlightMatches(highlighted, this.fnNames, '#8B4513'); return highlighted; } // 醫案出處字段：高亮相关典籍（蓝色） else if (fieldName === '醫案出處' &amp;&amp; typeof value === 'string') { return this.highlightMatches(value, this.snNames, 'rgb(51, 102, 255)'); } // 醫案醫者字段：高亮相关人物（棕色） else if (fieldName === '醫案醫者' &amp;&amp; typeof value === 'string') { return this.highlightMatches(value, this.fnNames, '#8B4513'); } // 其他字段处理（保持不变） if (typeof value === 'string' &amp;&amp; value.startsWith('http')) { return `<a href=&quot;${value}&quot; target=&quot;_blank&quot;>${value}</a>`; } return value; }, // 改进的高亮方法，支持不同颜色 highlightMatches(text, words, color) { if (!text || typeof text !== 'string' || words.length === 0) { return text; } const pattern = new RegExp( words .map(name => name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&amp;')) .join('|'), 'gi' ); return text.replace(pattern, match => `<span style=&quot;color: ${color}; font-weight: bold;&quot;>${this.escapeHtml(match)}</span>` ); }, sortBy(key) { const originalKey = Object.keys(this.fieldNames).find( origKey => this.fieldNames[origKey] === key ) || key; this.sortKey = originalKey; this.sortOrders[originalKey] = this.sortOrders[originalKey] * -1; this.saveState(); }, prevPage() { if (this.currentPage > 1) { this.currentPage--; this.saveState(); } }, nextPage() { if (this.currentPage < this.totalPages) { this.currentPage++; this.saveState(); } }, handlePageInput() { clearTimeout(this.inputTimeout); this.inputTimeout = setTimeout(() => { this.goToPage(); this.saveState(); }, 300); }, goToPage() { if (this.inputPage === null || this.inputPage === undefined || this.inputPage === '') { this.inputPage = this.currentPage; return; } const page = parseInt(this.inputPage); if (isNaN(page)) { this.inputPage = this.currentPage; return; } if (page < 1) { this.currentPage = 1; } else if (page > this.totalPages) { this.currentPage = this.totalPages; } else { this.currentPage = page; } this.inputPage = this.currentPage; } }, mounted() { this.restoreState(); this.fetchData(); }, activated() { this.restoreState(); }, deactivated() { this.saveState(); } }; </script> <style scoped> .container { max-width: 1200px; margin: 0px; padding: 0px; } .control-panel { margin-bottom: 0px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center; position: fixed; bottom: 0; left: 0; width: 100%; background-color: #ffd800ff; z-index: 999; padding: 10px 20px; box-sizing: border-box; } .content-area { position: fixed; top: 56px; bottom: 45px; left: 0; width: 70%; background: white; padding: 1px; z-index: 100; overflow-y: auto; } .relative-area { position: fixed; top: 56px; bottom: 45px; right: 0; width: 30%; background: lightblue; padding: 1px; z-index: 100; overflow-y: auto; } .refresh-btn, .relative-btn { padding: 4px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; } .refresh-btn:hover, .relative-btn:hover { background-color: #45a049; } .search-input { padding: 8px; border: 1px solid #ddd; border-radius: 4px; flex-grow: 1; max-width: 300px; } .pagination-controls { display: flex; align-items: center; gap: 5px; } .page-size-select { padding: 4px; border-radius: 4px; width: 70px; } .page-input { width: 50px; padding: 4px; border: 1px solid #ddd; border-radius: 4px; text-align: center; } .horizontal-records { display: flex; flex-direction: column; gap: 20px; } .record-card { border: 1px solid #ddd; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .record-header { padding: 12px 16px; background-color: #f5f5f5; border-bottom: 1px solid #ddd; } .record-header h3 { margin: 0; font-size: 1.1em; } .record-body { padding: 16px; } .record-field { display: flex; margin-bottom: 12px; line-height: 1.5; } .record-field:last-child { margin-bottom: 0; } .field-name { font-weight: bold; min-width: 120px; color: #555; } .field-value { flex-grow: 1; display: flex; flex-wrap: wrap; gap: 8px; } .dntag-value { display: flex; flex-wrap: wrap; gap: 8px; } /* 本草名称样式 */ .mntag-value { display: flex; flex-wrap: wrap; gap: 8px; color: #006400; /* 深绿色 */ font-weight: 500; } /* 方剂名称样式 */ .pntag-value { display: flex; flex-wrap: wrap; gap: 8px; color: #800080; /* 紫色 */ font-weight: 500; } /* 出处名称样式 */ .sntag-value { display: flex; flex-wrap: wrap; gap: 8px; color: #0094ff; /* 靛蓝->蓝色 */ font-weight: 500; } /* 新增人物名称样式 */ .fntag-value { display: flex; flex-wrap: wrap; gap: 8px; color: #8B4513; /* 棕色 */ font-weight: 500; } .array-value { display: flex; flex-wrap: wrap; gap: 8px; } .no-data { padding: 20px; text-align: center; color: #666; font-style: italic; } button:disabled { opacity: 0.5; cursor: not-allowed; } </style> mrviewer.vue: <!-- mrviewer.vue --> <template> <div class=&quot;container&quot;> <!-- 控制面板 --> <div class=&quot;control-panel&quot;> <button @click=&quot;fetchData&quot; class=&quot;refresh-btn&quot;>刷新數據</button> <button @click=&quot;toggleRelative&quot; class=&quot;relative-btn&quot;> {{ showRelative ? '病態關聯' : '病態關聯' }} </button> <!-- 本草关联器按钮 --> <button @click=&quot;toggleMNRelative&quot; class=&quot;relative-btn&quot;> {{ showMNRelative ? '本草關聯' : '本草關聯' }} </button> <!-- 方剂关联器按钮 --> <button @click=&quot;togglePNRelative&quot; class=&quot;relative-btn&quot;> {{ showPNRelative ? '方劑關聯' : '方劑關聯' }} </button> <!-- 出处关联器按钮 --> <button @click=&quot;toggleSNRelative&quot; class=&quot;relative-btn&quot;> {{ showSNRelative ? '典籍關聯' : '典籍關聯' }} </button> <!-- 人物关联器按钮 --> <button @click=&quot;toggleFNRelative&quot; class=&quot;relative-btn&quot;> {{ showFNRelative ? '人物關聯' : '人物關聯' }} </button> <!-- 新增辨證关联器按钮 --> <button @click=&quot;toggleDianNRelative&quot; class=&quot;relative-btn&quot;> {{ showDianNRelative ? '辨證關聯' : '辨證關聯' }} </button> <input v-model=&quot;searchQuery&quot; placeholder=&quot;搜索...&quot; class=&quot;search-input&quot; /> <div class=&quot;pagination-controls&quot;> <span>每頁顯示:</span> <select v-model.number=&quot;pageSize&quot; class=&quot;page-size-select&quot;> <option value=&quot;1&quot;>1筆</option> <option value=&quot;4&quot;>4筆</option> <option value=&quot;10&quot;>10筆</option> </select> <button @click=&quot;prevPage&quot; :disabled=&quot;currentPage === 1&quot;>上一页</button> <span>第</span> <input type=&quot;number&quot; v-model.number=&quot;inputPage&quot; min=&quot;1&quot; :max=&quot;totalPages&quot; class=&quot;page-input&quot; @input=&quot;handlePageInput&quot;> <span>頁 / 共 {{ totalPages }} 頁</span> <button @click =&quot;nextPage&quot; :disabled=&quot;currentPage === totalPages&quot;> 下一頁</button> <span>醫案閱讀器</span> </div> </div> <!-- 主内容区域 --> <div class=&quot;content-area&quot;> <div class=&quot;horizontal-records&quot; v-if=&quot;filteredData.length > 0&quot;> <div v-for=&quot;(item, index) in paginatedData&quot; :key=&quot;item.id&quot; class=&quot;record-card&quot;> <div class=&quot;record-header&quot;> <h3>醫案 #{{ (currentPage - 1) * pageSize + index + 1 }}</h3> </div> <div class=&quot;record-body&quot;> <div v-for=&quot;(value, key) in processFieldNames(item)&quot; :key=&quot;key&quot; class=&quot;record-field&quot;> <div class=&quot;field-name&quot;>{{ key }}:</div> <div class=&quot;field-value&quot;> <!-- 病态名称 --> <div v-if=&quot;key === '相關病態' &amp;&amp; Array.isArray(value)&quot; class=&quot;dntag-value&quot; v-html=&quot;formatDntagValueHTML(value)&quot;></div> <!-- 本草名称 --> <div v-else-if=&quot;key === '相關本草' &amp;&amp; Array.isArray(value)&quot; class=&quot;mntag-value&quot; v-html=&quot;formatMntagValueHTML(value)&quot;></div> <!-- 方剂名称 --> <div v-else-if=&quot;key === '相關方劑' &amp;&amp; Array.isArray(value)&quot; class=&quot;pntag-value&quot; v-html=&quot;formatPntagValueHTML(value)&quot;></div> <!-- 出处名称 --> <div v-else-if=&quot;key === '相關典籍' &amp;&amp; Array.isArray(value)&quot; class=&quot;sntag-value&quot; v-html=&quot;formatSntagValueHTML(value)&quot;></div> <!-- 人物名称 --> <div v-else-if=&quot;key === '相關人物' &amp;&amp; Array.isArray(value)&quot; class=&quot;fntag-value&quot; v-html=&quot;formatFntagValueHTML(value)&quot;></div> <!-- 辨證名称 --> <div v-else-if=&quot;key === '相關辨證' &amp;&amp; Array.isArray(value)&quot; class=&quot;diantag-value&quot; v-html=&quot;formatDiantagValueHTML(value)&quot;></div> <div v-else-if=&quot;Array.isArray(value)&quot; class=&quot;array-value&quot;> <span v-for=&quot;(subItem, subIndex) in value&quot; :key=&quot;subIndex&quot;> <span v-html=&quot;formatValue(subItem, key)&quot;></span><span v-if=&quot;subIndex < value.length - 1&quot;>；</span> </span> </div> <div v-else v-html=&quot;formatValue(value, key)&quot;></div> </div> </div> </div> </div> </div> <div v-else class=&quot;no-data&quot;> 沒有找到匹配的數據 </div> </div> <!-- 相关区域 --> <div class=&quot;relative-area&quot;> <mrdnrelate v-if=&quot;showRelative&quot; :currentCase=&quot;currentCase&quot; :allTags=&quot;api2Data&quot; @data-updated=&quot;handleDataUpdated&quot;></mrdnrelate> <!-- 本草关联器 --> <mrmnrelate v-else-if=&quot;showMNRelative&quot; :currentCase=&quot;currentCase&quot; :allTags=&quot;api3Data&quot; @data-updated=&quot;handleDataUpdated&quot;></mrmnrelate> <!-- 方剂关联器 --> <mrpnrelate v-else-if=&quot;showPNRelative&quot; :currentCase=&quot;currentCase&quot; :allTags=&quot;api5Data&quot; @data-updated=&quot;handleDataUpdated&quot;></mrpnrelate> <!-- 出处关联器 --> <mrsnrelate v-else-if=&quot;showSNRelative&quot; :currentCase=&quot;currentCase&quot; :allTags=&quot;api4Data&quot; @data-updated=&quot;handleDataUpdated&quot;></mrsnrelate> <!-- 人物关联器 --> <mrfnrelate v-else-if=&quot;showFNRelative&quot; :currentCase=&quot;currentCase&quot; :allTags=&quot;api6Data&quot; @data-updated=&quot;handleDataUpdated&quot;></mrfnrelate> <!-- 新增辨證关联器 --> <mrdianrelate v-else-if=&quot;showDianNRelative&quot; :currentCase=&quot;currentCase&quot; :allTags=&quot;api7Data&quot; @data-updated=&quot;handleDataUpdated&quot;></mrdianrelate> <span v-else>點按下方關聯器，顯示醫案相關專有名詞</span> </div> </div> </template> <script> import mrdnrelate from './mrdnrelate.vue'; import mrmnrelate from './mrmnrelate.vue'; import mrpnrelate from './mrpnrelate.vue'; import mrsnrelate from './mrsnrelate.vue'; import mrfnrelate from './mrfnrelate.vue'; import mrdianrelate from './mrdianrelate.vue'; // 导入辨證关联器组件 export default { name: 'mrviewer', components: { mrdnrelate, mrmnrelate, mrpnrelate, mrsnrelate, mrfnrelate, mrdianrelate }, data() { return { api1Data: [], api2Data: [], api3Data: [], api4Data: [], api5Data: [], api6Data: [], api7Data: [], // 辨證标签数据 mergedData: [], currentPage: 1, pageSize: 1, searchQuery: '', sortKey: '', sortOrders: {}, inputPage: 1, fieldNames: { 'mrcase': '醫案全文', 'mrorigin': '醫案出處', 'mrdoctor': '醫案醫者', 'mrname': '醫案命名', 'mrposter': '醫案提交者', 'mrlasttime': '最後編輯時間', 'mreditnumber': '編輯次數', 'mrreadnumber': '閱讀次數', 'mrpriority': '重要性', 'dntag': '相關病態', 'mntag': '相關本草', 'pntag': '相關方劑', 'sntag': '相關典籍', 'fntag': '相關人物', 'diantag': '相關辨證' // 新增辨證字段 }, inputTimeout: null, dnNames: [], mnNames: [], pnNames: [], snNames: [], fnNames: [], dianNames: [], // 辨證名称列表 stateVersion: '1.0', showRelative: false, showMNRelative: false, showPNRelative: false, showSNRelative: false, showFNRelative: false, showDianNRelative: false, // 控制辨證关联器显示 currentCase: null }; }, computed: { filteredData() { const query = this.searchQuery.trim(); if (query &amp;&amp; /^\d+$/.test(query)) { const idToSearch = parseInt(query, 10); return this.mergedData.filter(item => item.id === idToSearch); } if (!query) return this.mergedData; const lowerQuery = query.toLowerCase(); return this.mergedData.filter(item => { return Object.values(item).some(value => { if (value === null || value === undefined) return false; if (Array.isArray(value)) { return value.some(subValue => { if (typeof subValue === 'object' &amp;&amp; subValue !== null) { return JSON.stringify(subValue).toLowerCase().includes(lowerQuery); } return String(subValue).toLowerCase().includes(lowerQuery); }); } if (typeof value === 'object' &amp;&amp; value !== null) { return JSON.stringify(value).toLowerCase().includes(lowerQuery); } return String(value).toLowerCase().includes(lowerQuery); }); }); }, sortedData() { if (!this.sortKey) return this.filteredData; const order = this.sortOrders[this.sortKey] || 1; return [...this.filteredData].sort((a, b) => { const getValue = (obj) => { const val = obj[this.sortKey]; if (Array.isArray(val)) return JSON.stringify(val); return val; }; const aValue = getValue(a); const bValue = getValue(b); if (aValue === bValue) return 0; return aValue > bValue ? order : -order; }); }, paginatedData() { const start = (this.currentPage - 1) * Number(this.pageSize); const end = start + Number(this.pageSize); const data = this.sortedData.slice(start, end); if (data.length > 0) { this.currentCase = data[0]; } else { this.currentCase = null; } return data; }, totalPages() { return Math.ceil(this.filteredData.length / this.pageSize) || 1; } }, watch: { pageSize() { this.currentPage = 1; this.inputPage = 1; this.saveState(); }, currentPage(newVal) { this.inputPage = newVal; this.saveState(); }, filteredData() { if (this.currentPage > this.totalPages) { this.currentPage = Math.max(1, this.totalPages); } this.inputPage = this.currentPage; }, searchQuery() { this.saveState(); } }, methods: { handleDataUpdated() { alert('數據已更新，正在刷新醫案數據...'); this.fetchData(); }, toggleMNRelative() { if (!this.showMNRelative) { this.showRelative = false; this.showPNRelative = false; this.showSNRelative = false; this.showFNRelative = false; this.showDianNRelative = false; } this.showMNRelative = !this.showMNRelative; }, togglePNRelative() { if (!this.showPNRelative) { this.showRelative = false; this.showMNRelative = false; this.showSNRelative = false; this.showFNRelative = false; this.showDianNRelative = false; } this.showPNRelative = !this.showPNRelative; }, toggleSNRelative() { if (!this.showSNRelative) { this.showRelative = false; this.showMNRelative = false; this.showPNRelative = false; this.showFNRelative = false; this.showDianNRelative = false; } this.showSNRelative = !this.showSNRelative; }, toggleRelative() { if (this.showRelative) { this.showRelative = false; } else { this.showMNRelative = false; this.showPNRelative = false; this.showSNRelative = false; this.showFNRelative = false; this.showDianNRelative = false; this.showRelative = true; } }, toggleFNRelative() { if (!this.showFNRelative) { this.showRelative = false; this.showMNRelative = false; this.showPNRelative = false; this.showSNRelative = false; this.showDianNRelative = false; } this.showFNRelative = !this.showFNRelative; }, // 辨證关联器切换方法 toggleDianNRelative() { if (!this.showDianNRelative) { this.showRelative = false; this.showMNRelative = false; this.showPNRelative = false; this.showSNRelative = false; this.showFNRelative = false; } this.showDianNRelative = !this.showDianNRelative; }, // 辨證名称HTML格式化方法 (使用红色) formatDiantagValueHTML(diantagArray) { return diantagArray.map(tagObj => { const name = tagObj.dianname || tagObj.name || '未命名標籤'; return `<span style=&quot;color: rgb(255, 0, 0); font-weight: bold;&quot;>${this.escapeHtml(name)}</span>`; }).join('；'); }, escapeHtml(text) { const map = { '&amp;': '&amp;', '<': '<', '>': '>', '&quot;': '&quot;', &quot;'&quot;: ''' }; return text.replace(/[&amp;<>&quot;']/g, m => map[m]); }, saveState() { const state = { version: this.stateVersion, currentPage: this.currentPage, pageSize: this.pageSize, searchQuery: this.searchQuery, timestamp: new Date().getTime() }; sessionStorage.setItem('mrviewerState', JSON.stringify(state)); }, restoreState() { const savedState = sessionStorage.getItem('mrviewerState'); if (!savedState) return; try { const state = JSON.parse(savedState); if (state.version !== this.stateVersion) return; this.currentPage = state.currentPage || 1; this.pageSize = state.pageSize || 1; this.searchQuery = state.searchQuery || ''; this.inputPage = this.currentPage; } catch (e) { sessionStorage.removeItem('mrviewerState'); } }, async fetchData() { try { // 获取原有数据 const api1Response = await fetch(&quot;MRInfo/?format=json&quot;); this.api1Data = await api1Response.json(); const api2Response = await fetch(&quot;DNTag/?format=json&quot;); this.api2Data = await api2Response.json(); const api3Response = await fetch(&quot;MNTag/?format=json&quot;); this.api3Data = await api3Response.json(); const api4Response = await fetch(&quot;SNTag/?format=json&quot;); this.api4Data = await api4Response.json(); const api5Response = await fetch(&quot;PNTag/?format=json&quot;); this.api5Data = await api5Response.json(); const api6Response = await fetch(&quot;FNTag/?format=json&quot;); this.api6Data = await api6Response.json(); // 辨證数据获取 const api7Response = await fetch(&quot;DiaNTag/?format=json&quot;); this.api7Data = await api7Response.json(); // 本草名称列表 this.mnNames = this.api3Data.map(item => item.mnname).filter(name => name &amp;&amp; name.trim()); this.mnNames.sort((a, b) => b.length - a.length); // 方剂名称列表 this.pnNames = this.api5Data.map(item => item.pnname).filter(name => name &amp;&amp; name.trim()); this.pnNames.sort((a, b) => b.length - a.length); // 病态名称列表 this.dnNames = this.api2Data.map(item => item.dnname).filter(name => name &amp;&amp; name.trim()); this.dnNames.sort((a, b) => b.length - a.length); // 出处名称列表 this.snNames = this.api4Data.map(item => item.snname).filter(name => name &amp;&amp; name.trim()); this.snNames.sort((a, b) => b.length - a.length); // 人物名称列表 this.fnNames = this.api6Data.map(item => item.fnname).filter(name => name &amp;&amp; name.trim()); this.fnNames.sort((a, b) => b.length - a.length); // 辨證名称列表 this.dianNames = this.api7Data.map(item => item.dianname).filter(name => name &amp;&amp; name.trim()); this.dianNames.sort((a, b) => b.length - a.length); this.mergeData(); this.currentPage = 1; this.inputPage = 1; this.saveState(); } catch (error) { console.error(&quot;獲取數據失敗:&quot;, error); alert(&quot;數據加載失敗，請稍後重試&quot;); } }, mergeData() { this.mergedData = this.api1Data.map((item) => { const newItem = { ...item }; // 处理病态标签 if (newItem.dntag &amp;&amp; Array.isArray(newItem.dntag)) { newItem.dntag = newItem.dntag.map((tagId) => { const matchedItem = this.api2Data.find(api2Item => api2Item.id === tagId); return matchedItem || { id: tagId, dnname: &quot;未找到匹配的數據&quot; }; }); } // 处理本草标签 if (newItem.mntag &amp;&amp; Array.isArray(newItem.mntag)) { newItem.mntag = newItem.mntag.map((tagId) => { const matchedItem = this.api3Data.find(api3Item => api3Item.id === tagId); return matchedItem || { id: tagId, mnname: &quot;未找到匹配的數據&quot; }; }); } // 处理方剂标签 if (newItem.pntag &amp;&amp; Array.isArray(newItem.pntag)) { newItem.pntag = newItem.pntag.map((tagId) => { const matchedItem = this.api5Data.find(api5Item => api5Item.id === tagId); return matchedItem || { id: tagId, pnname: &quot;未找到匹配的數據&quot; }; }); } // 处理出处标签 if (newItem.sntag &amp;&amp; Array.isArray(newItem.sntag)) { newItem.sntag = newItem.sntag.map((tagId) => { const matchedItem = this.api4Data.find(api4Item => api4Item.id === tagId); return matchedItem || { id: tagId, snname: &quot;未找到匹配的數據&quot; }; }); } // 处理人物标签 if (newItem.fntag &amp;&amp; Array.isArray(newItem.fntag)) { newItem.fntag = newItem.fntag.map((tagId) => { const matchedItem = this.api6Data.find(api6Item => api6Item.id === tagId); return matchedItem || { id: tagId, fnname: &quot;未找到匹配的數據&quot; }; }); } // 处理辨證标签 if (newItem.diantag &amp;&amp; Array.isArray(newItem.diantag)) { newItem.diantag = newItem.diantag.map((tagId) => { const matchedItem = this.api7Data.find(api7Item => api7Item.id === tagId); return matchedItem || { id: tagId, dianname: &quot;未找到匹配的數據&quot; }; }); } return newItem; }); // 初始化排序顺序 this.sortOrders = {}; if (this.mergedData.length > 0) { Object.keys(this.mergedData[0]).forEach(key => { this.sortOrders[key] = 1; }); } }, processFieldNames(item) { const result = {}; for (const key in item) { const newKey = this.fieldNames[key] || key; result[newKey] = item[key]; } return result; }, formatValue(value, fieldName) { if (value === null || value === undefined) return ''; // 醫案全文的高亮 if (fieldName === '醫案全文' &amp;&amp; typeof value === 'string') { let highlighted = this.highlightMatches(value, this.dnNames, 'rgb(212, 107, 8)'); highlighted = this.highlightMatches(highlighted, this.mnNames, 'rgb(0, 128, 0)'); highlighted = this.highlightMatches(highlighted, this.pnNames, 'rgb(128, 0, 128)'); highlighted = this.highlightMatches(highlighted, this.snNames, 'rgb(51, 102, 255)'); highlighted = this.highlightMatches(highlighted, this.fnNames, '#8B4513'); highlighted = this.highlightMatches(highlighted, this.dianNames, 'rgb(255, 0, 0)'); // 辨證高亮 return highlighted; } // 醫案出處字段 else if (fieldName === '醫案出處' &amp;&amp; typeof value === 'string') { return this.highlightMatches(value, this.snNames, 'rgb(51, 102, 255)'); } // 醫案醫者字段 else if (fieldName === '醫案醫者' &amp;&amp; typeof value === 'string') { return this.highlightMatches(value, this.fnNames, '#8B4513'); } if (typeof value === 'string' &amp;&amp; value.startsWith('http')) { return `<a href=&quot;${value}&quot; target=&quot;_blank&quot;>${value}</a>`; } return value; }, highlightMatches(text, words, color) { if (!text || typeof text !== 'string' || words.length === 0) { return text; } const pattern = new RegExp( words .map(name => name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&amp;')) .join('|'), 'gi' ); return text.replace(pattern, match => `<span style=&quot;color: ${color}; font-weight: bold;&quot;>${this.escapeHtml(match)}</span>` ); }, prevPage() { if (this.currentPage > 1) { this.currentPage--; this.saveState(); } }, nextPage() { if (this.currentPage < this.totalPages) { this.currentPage++; this.saveState(); } }, handlePageInput() { clearTimeout(this.inputTimeout); this.inputTimeout = setTimeout(() => { this.goToPage(); this.saveState(); }, 300); }, goToPage() { if (this.inputPage === null || this.inputPage === undefined || this.inputPage === '') { this.inputPage = this.currentPage; return; } const page = parseInt(this.inputPage); if (isNaN(page)) { this.inputPage = this.currentPage; return; } if (page < 1) { this.currentPage = 1; } else if (page > this.totalPages) { this.currentPage = this.totalPages; } else { this.currentPage = page; } this.inputPage = this.currentPage; } }, mounted() { this.restoreState(); this.fetchData(); }, activated() { this.restoreState(); }, deactivated() { this.saveState(); } }; </script> <style scoped> .container { max-width: 1200px; margin: 0px; padding: 0px; } .control-panel { margin-bottom: 0px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center; position: fixed; bottom: 0; left: 0; width: 100%; background-color: #ffd800ff; z-index: 999; padding: 10px 20px; box-sizing: border-box; } .content-area { position: fixed; top: 56px; bottom: 45px; left: 0; width: 70%; background: white; padding: 1px; z-index: 100; overflow-y: auto; } .relative-area { position: fixed; top: 56px; bottom: 45px; right: 0; width: 30%; background: lightblue; padding: 1px; z-index: 100; overflow-y: auto; } .refresh-btn, .relative-btn { padding: 4px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; } .refresh-btn:hover, .relative-btn:hover { background-color: #45a049; } .search-input { padding: 8px; border: 1px solid #ddd; border-radius: 4px; flex-grow: 1; max-width: 300px; } .pagination-controls { display: flex; align-items: center; gap: 5px; } .page-size-select { padding: 4px; border-radius: 4px; width: 70px; } .page-input { width: 50px; padding: 4px; border: 1px solid #ddd; border-radius: 4px; text-align: center; } .horizontal-records { display: flex; flex-direction: column; gap: 20px; } .record-card { border: 1px solid #ddd; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .record-header { padding: 12px 16px; background-color: #f5f5f5; border-bottom: 1px solid #ddd; } .record-header h3 { margin: 0; font-size: 1.1em; } .record-body { padding: 16px; } .record-field { display: flex; margin-bottom: 12px; line-height: 1.5; } .record-field:last-child { margin-bottom: 0; } .field-name { font-weight: bold; min-width: 120px; color: #555; } .field-value { flex-grow: 1; display: flex; flex-wrap: wrap; gap: 8px; } .dntag-value { display: flex; flex-wrap: wrap; gap: 8px; } .mntag-value { display: flex; flex-wrap: wrap; gap: 8px; color: #006400; font-weight: 500; } .pntag-value { display: flex; flex-wrap: wrap; gap: 8px; color: #800080; font-weight: 500; } .sntag-value { display: flex; flex-wrap: wrap; gap: 8px; color: #0094ff; font-weight: 500; } .fntag-value { display: flex; flex-wrap: wrap; gap: 8px; color: #8B4513; font-weight: 500; } /* 辨證名称样式 */ .diantag-value { display: flex; flex-wrap: wrap; gap: 8px; color: rgb(255, 0, 0); font-weight: 500; } .array-value { display: flex; flex-wrap: wrap; gap: 8px; } .no-data { padding: 20px; text-align: center; color: #666; font-style: italic; } button:disabled { opacity: 0.5; cursor: not-allowed; } </style>
最新发布
08-02
但是，在问题描述中，您说“比较mrviewer0.vue與mrviewer.vue，找出mrviewer.vue的錯誤之處”，那么可能是在之前的版本中存在这些错误，而您提供的代码中已经修正。 然而，在您提供的修改后的mrviewer.vue代码中，...
null, undefined,““,0,false的关系
qq_33199019的博客
01-24 1998
null本质上和0,"",false是一类东西，它们都表示一种数据类型的非值。正如0表示数字类型的非值，""表示字符类型的非值一样，null表示完全空的对象，即可以把它看成是对象类型的非值，没有任何属性的对象，（{}不是完全空的对象，因为它继承了Object.prototype的属性，有一些自带方法。扩展一点，其实null就是Object.prototype的prototype....）因此typeof null返回object是完全合理的。 而undefined和它们都不同，它表示的就是未定义，还没有初
isNaN()部分总结
qq_23082751的博客
07-28 989
isNaN(x),如果 x 是特殊的非数字值 NaN（或者能被转换为这样的值），返回的值就是 true。如果 x 是其他值,则返回 false。 isNaN() 函数可用于判断其参数是否是 NaN，该值表示一个非法的数字（比如被 0 除后得到的结果）。 如果把 NaN 与任何值（包括其自身）相比得到的结果均是 false，所以要判断某个值是否是 NaN，不能使用 == 或 === 运算符。正因为如...
JavaScript：undefined!=false之解 及==比较的规则
云烟阁
12-05 1010
JS中有一个基本概念就是：  JavaScript中undefined==null  但undefined!==null  undefined与null转换成布尔值都是false  如果按照常规想法，比如下面的代码  Js代码   var a=1;   alert(Boolean(a));//返回true   //那么下面的代码也应该返回true   aler
JS中的0,null,undefined,[],'',false之间的关系
lgl_19910331的博客
08-15 1409
链接：https://www.nowcoder.com/questionTerminal/f17d81bd56cb4d0196e9e5c41ad59df9 来源：牛客网 条件表达式中undefined,null,空字符串 0 都当作false用在if语句判断，但undefined,null,空字符串, 0、false之间并不一定是相等的关系；通过代码实现说明有以下规律： （1）  0 、“”、...
js中注意||运算，undefined属于false
u010746364的博客
11-30 3762
function test(e) { e = e || {}; // 等价于e = e || new Object(); if (e.name == "jack") { alert("right"); } else { alert("error"); } } $(document).ready(function(){
Javascript 中的false,零值,null,undefined和空字符串对象(|| 与 && 运算符详解)
qq_43068818的博客
12-19 4546
Javascript 中的false,零值,null,undefined和空字符串对象(|| 与 && 运算符详解)
js中false和undefined的区分
weixin_41801490的博客
01-03 2028
js中false和undefined的区分 一个Boolean参数，判断她存不存在，如果存在的话就返回储存值，如果不存在的话默认为true 于是写出了 var result = (arg) ? arg : true; 结果发现不管存储值是什么，返回的都是true 看了一下代码发现如果 arg == true 返回 true arg == false 返回 true arg = undefined ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值