1.在html中对数据中的某一个标签是根据标签的类型书写的， 值写在了{ {}}中，希望显示的时候对值做某种细节处理 。

例如：我的需求：后端返回姓名、年龄、出生日期、学历等组成的一个数组， 出生日期要保存为带有时分秒的，但是显示时不需要时分秒 。

1）实现上述需求：有两种方式

a.方式一：

直接在接口调用收到数据时判断数据类型，并对数据进行处理。

b.方式二：

在显示的时候再调用函数处理数据（html标签的{ {}}中处理）

2）两种实现方式对比：

前提：由于有些要用输入框、有些要用下拉框，有些又要用日期选择框；我使用v-for渲染时就根据不同的控件类型分别渲染。

a.如果使用方式一就会二次对是否是出生日期的判断（第一次接收到数据去除时分秒要判断,第二次html渲染的时候判断）；使用方式二则只需要对是否是出生日期进行一次判断（只在html渲染的时候判断）—— 方式二能减少 if-else书写的次数

b.如果数据还需要原样返回给后端，那么使用方式二显然是perfect，没有修改原数据，只是返回了想要的数据；使用方式一就必须存一个备份数据，如果需要单独处理的数据多了，简直就是一场灾难（保留一堆其实没必要保存的数据）—— 方式二保留了原始数据，避免了冗余数据

c.如果有很多地方需要进行同样的处理，函数无疑是更好的选择。—— 一次书写，多处调用，提高了代码的可维护性

所以选择方式二实现需求,怎样在html渲染时调用函数呢？

二、解决方法（在html渲染时调用函数）

1.定义处理函数

//与后端约定返回的数据格式是这样的：'2020-04-09 08:30:00' 年月日和时分秒之间用空格分隔
export const formatBorntime=(borntime)=>{
   //处理逻辑
   //******
   //返回处理好的数据
   return borntime.split(" ")[0];
2.引入处理函数,在data中定义函数，在html中使用
 
<template>
   <div v-for="(item,key) of personInfo">
     <template v-if="key === 'borntime'">
          <div class="info-title">{{ item.label }}</div>
          <span>：</span>
          <!-- 3.使用方法formatDateMethod-->
          <el-tooltip
            effect="dark"
            :content="formatDateMethod(new Date(item.value))).toString()"
            placement="top"
            <!-- 3.使用方法formatDateMethod-->
            <div class="info-content">
                formatDateMethod(new Date(item.value)).toString()
          </el-tooltip>
        </template>
        <template v-else>
          <div class="info-title">{{ item.label }}</div>
          <span>：</span>
          <el-tooltip
            effect="dark"
            :content="item.value.toString()"
            placement="top"
            <div class="info-content">
              {{ item.value }}
          </el-tooltip>
        </template>
</template>
<script>
//1.引入处理出生日期显示的函数
import { formatBorntime } from "@/utils/common";
export default{
  data(){
    //2.在data中定义方法
    formatDateMethod:formatBorntime,
    personInfo: {
        patientname: {
          label: "姓名",
          value: "",
        patientage: {
          label: "年龄",
          value: "",
        borntime: {
          label: "出生日期",
          value: "2022-04-06 00:00:00",
        height: {
          label: "身高(cm)",
          value: "",
</script>
 
注：必须在data中定义  或者  methods中定义该方法，否则无法直接使用(报错：html中使用的函数不存在或不是响应式的）
 
1）在data中定义
 
  data(){
     formatDateMethod:formatBorntime,
 
2）在methods中定义
 
  methods: {
     formatDateMethod(params1){
       return formatBorntime (params1);
     }
 
  ----------------------2022/11/21更新-------------------------------------------------------------------------------------
 
    上面的方法的确可以解决问题，但是更合理的方式是  使用 computed计算属性，computed中写处理逻辑（personInfo变化时，处理 borntime的格式）。
 
    原因：computed可以缓存计算结果,在borntime没有变化时，不会再次调用处理逻辑。而直接写的方法调用，在每次渲染HTML时都会被调用。computed 性能更好一些。
 
<template>
   <div v-for="(item,key) of personInfo">
     <template v-if="key === 'borntime'">
          <div class="info-title">{{ item.label }}</div>
          <span>：</span>
          <!-- 3.使用computed属性 borntime_deal -->
          <el-tooltip
            effect="dark"
            :content="borntime_deal"
            placement="top"
            <!-- 3.使用computed属性 borntime_deal-->
            <div class="info-content">
               borntime_deal
          </el-tooltip>
        </template>
        <template v-else>
          <div class="info-title">{{ item.label }}</div>
          <span>：</span>
          <el-tooltip
            effect="dark"
            :content="item.value.toString()"
            placement="top"
            <div class="info-content">
              {{ item.value }}
          </el-tooltip>
        </template>
</template>
<script>
//1.引入处理出生日期显示的函数
import { formatBorntime } from "@/utils/common";
export default{
  data(){
    personInfo: {
        patientname: {
          label: "姓名",
          value: "",
        patientage: {
          label: "年龄",
          value: "",
        borntime: {
          label: "出生日期",
          value: "2022-04-06 00:00:00",
        height: {
          label: "身高(cm)",
          value: "",
  computed:{
    //  2.根据 personInfo.borntime.value 处理 borntime的格式(因为要渲染整个personInfo,所以personInfo一定是变化的,可以正确拿到borntime)
      borntime_deal(){
          return formatBorntime(personInfo.borntime.value).toString()
</script>
 
1.我也是今天遇到上面这个需求，突然想到这样做。对比中第二点说的问题：其实之前遇到过类似的问题，有的地方需要对数据处理，有的地方又要保留原始数据，但是还备份了一组数据，现在想想就是给自己制作麻烦，还浪费了空间……
 
希望对你有帮助！
 
如有错误，欢迎指正，谢谢！
 
				
一、模板语法
Vue模板语法实现前端渲染，前端渲染即把数据填充到html标签中。
数据（来自服务器）+模板（html标签）=前端渲染（产物是静态html内容）
1. 文本插值
用双大括号插入文本，数据可变，解释为普通文本
<div id="app">
    <!-- 会与实例中的【data】中的属性绑定在一起，并且数据实现同步-->
    <h1>{{message}}</h1>
</div></body>
出处：https://www.cnblogs.com/echoyya/
最近在写项目的时候，总是遇到在html中使用vue.js的情况，且页面逻辑较多，之前的项目经验都是使用脚手架等已有的项目架构，使用.vue文件完成组价注册，及组件之间的调用，还没有过在html中创建组件的经验，所以借此机会学习总结一下。
方法一：Vue.extend( options )
  用法：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。data 选项是特例，需要注意 – 在 Vue.extend() 中它必须是函数
  extend 创建的是 Vue 构造器，而
&lt;template&gt;
  &lt;div&gt;
    &lt;el-row type="flex" justify="space-between" class="head-box"&gt;
      &lt;el-col class="head-logo"&gt;
				
在父组件中调用子组件的方法：
 1.给子组件定义一个ref属性。eg:ref="childItem"
 2.在子组件的methods中声明一个函数。eg: useInPar:function (str) {console.log(str)}
 2. 在父组件的中声明一个函数，并通过this.$refs.childItem.userInPar来使用子组件中声明的函数。
<template>
 <child ref='child'>
  <button @click='useChildFun'></button>
 </template>
 [removed]
				
  近期在写需求的时候get到一个新的知识点，那就是使用 v-html 编译后台返回的富文本内容，使它可以正常显示到页面中。大家可能不知道，在富文本编辑的内容，最终都会变成了 标签+内容  的形式来保存的，所以在其它地方使用到这一内容的时候，它是以字符串的形式传递过来的，此时我们就需要用到 v-html 指令来将标签编译。
一、举个例子
  这里举例是使用jsp实现了后台管理系统富文本编辑器，然后需要将在富文本编辑器中的内容返回给前端在移动端进行显示，如下图：
  后台接口返回的数据是这样的：以属性值的方
在最下方附上完整代码吧，节省篇幅，过程中的介绍都截取部分代码进行说明。
文本 {{}}
插入文本数据使用{{ 数据名称 }} 的方式。这种方式之前也是经常使用到的，这里不再过多介绍了
前文：3. Vue基础指令:{{}}；v-bind；v-on；v-model；v-if；v-for。
<span>Message: {{ msg }}</span>
原生HTML v-html
使用{{}}的方式会将
				
今天使用节流函数的时候遇见了一个问题，搞了半天才找到原因，所以在这里做个总结。
浏览器的一些事件，如：resize，scroll，mousemove等。这些事件触发频率太过频繁，绑定在这些事件上的回调函数会不停的被调用，加重浏览器的负担，导致用户体验非常糟糕。所以先贤们发明了节流函数，简单版本如下：
function throttle (f, wait = 200) {
 let last = 0
 return function (...args) {
 let now = Date.now()
 if (now - last > wait) {
  last = now
				vue watch报错：Error in callback for watcher “xxx“: “TypeError: Cannot read properties of undefined ...
					40972
				使用 vue cli 的 vue serve命令单独运行.vue文件报错： Error: Cannot find module ‘@vue/compiler-sfc/package.json‘
					16043
                async导致函数结果出乎意料，改变原来代码的意图；await is only valid in async functions and the top level bodies of modules
                    let tab = chrome.tabs.query(queryOptions);
  let tab = await chrome.tabs.query(queryOptions);
否则tab应该是拿不到的
                async导致函数结果出乎意料，改变原来代码的意图；await is only valid in async functions and the top level bodies of modules
[code=javascript]
chrome.commands.onCommand.addListener(function (command) {
	console.log(command);
	if (command === 'capture_video') {
		async() => {
			let tab = await getCurrentTab();
			console.log(tab);
			chrome.scripting.executeScript({
				target: { tabId: tab[0].id },
				files: ['video.js']
async function getCurrentTab() {
  let queryOptions = { active: true, lastFocusedWindow: true };
  let tab = chrome.tabs.query(queryOptions);
  return tab;
[/code]
                Vue组件数据重置/清空；模态框数据重置问题
                    前端 - 李李: