Vue中集成的指令以及其用法

分类：Vue作者：赏花赏景赏时光

下面介绍Vue中集成的指令以及用法和作用

v-bind   v-on   v-model  v-for   v-html   v-text   v-if   v-else-if   v-else   v-show   v-once  v-pre   v-cloak

1、声明式渲染有两种方法

A、文本插值，用两个花括号：{{内容}}

html如下：

<div id="app">    //挂载元el，指定的节点，用id表示
  {{ message }}   //vue实例对象中data对象中某个属性名
</div>

js如下：

var app = new Vue({
  el: '#app',//挂载到DOM节点上，节点的id=app
  data: {        //给data对象定义属性message，与html中某个文本对象变量名一致
    message: 'Hello Vue!'
  }
})

输出结果：

<div a=''  v-bind:a=''>

这句代码中的两种定义属性的区别，a=''默认值是固定的；而v-bind:a=''的值是可以动态变化的，即动态绑定数据，v-bind:动态变化对象="表达式"，并且可以将数据传递给子组件，子组件通过props属性对象接收

 

B、v-bind（可以简化为：），动态绑定数据，及时对页面的数据进行变更，如V-bind:标签属性="变量名"

html如下：

<div id="app-2">
   <span v-bind:title="message">  //或者简写：<span :title="message">
      鼠标悬停几秒钟查看此处动态绑定的提示信息！
   </span>
</div>

js如下：

var app2 = new Vue({
    el: '#app-2',data: {
       message: '页面加载于 ' + new Date().toLocaleString()
   }
})

显示效果如下：

2、v-bind:class，三种绑定方法---

      A、对象型 "{red:isred}" 

      B、三目型"isred?'red':'blue'"

      C、数组型"[{red:'isred'},{blue:'isblue'}]"

A、对象型：

<!DOCTYPE html>
<html>
<head>
	<title>Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
	<style>
        .red {
            background: red;
        }
  
        .blue {
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
	<div id="box">
     	<div style="width: 100px;height: 100px;" v-bind:class='{red:isred}'></div>
    	<!--<div style="width: 100px;height: 100px;" v-bind:class='isred?"red":"blue"'></div>-->    <!--三元运算符方式-->
     	<!--<div style="width: 100px;height: 100px;" v-bind:class='[{red:"isred"}]'></div>-->
	</div>

	
	<script type="text/javascript">
	    new Vue({
         	el: "#box",data:{
                isred:true
            }
    	})

	</script>
</body>
</html>

显示结果：

B、三目型：

<!DOCTYPE html>
<html>
<head>
	<title>Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
	<style>
        .red {
 
            background: red;
        }
  
        .blue {
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
	<div id="box">
     	<!--<div style="width: 100px;height: 100px;" v-bind:class='{red:isred}'></div>-->
    	<div style="width: 100px;height: 100px;" v-bind:class='isred?"red":"blue"'></div>    <!--三元运算符方式-->
     	<!--<div style="width: 100px;height: 100px;" v-bind:class='[{red:"isred"}]'></div>-->
	</div>

	
	<script type="text/javascript">
	    new Vue({
         	el: "#box",data:{
                isred:false
            }
    	})

	</script>
</body>
</html>

显示效果：

C、数组型 

<!DOCTYPE html>
<html>
<head>
	<title>Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
	<style>       
	    .red { background: red;}        
	    .blue { width: 100px;  height: 100px;  background: blue;}    
	</style>
</head>
<body>
	<div id="box">     	
		<!--<div style="width: 100px;height: 100px;" v-bind:class='{red:isred}'></div>-->    
		<!--<div style="width: 100px;height: 100px;" v-bind:class='isred?"red":"blue"'></div>-->    <!--三元运算符方式-->     	
		<div style="width: 100px;height: 100px;" v-bind:class='[{red:"isred"}]'></div>
	</div>
	<script type="text/javascript">   
		new Vue({   
		    el: "#box",data:{                
		    	isred:true         
		    }    	
		})
	</script>
</body>
</html>

显示效果：

3、v-bind:style，绑定内联样式

A、内联样式，对象型

<!DOCTYPE html>
<html>
<head>
	<title>Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
	<div id='box'>
		<div v-bind:style="{ color: activeColor,fontSize: fontSize + 'px' }">{{message}}</div>
	</div>
	<script type="text/javascript">
		new Vue({
		    el:"#box",data: {
			   activeColor: 'red',fontSize: 30,message:'hello',}
		})
	</script>
</body>
</html>

显示效果：

B、直接绑定到一个对象上

<!DOCTYPE html>
<html>
<head>
	<title>Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
	<div id='box'>
		<div v-bind:style="styleObj">{{message}}</div>
	</div>
	<script type="text/javascript">
		new Vue({
		    el:"#box",data: {
				styleObj:{
					color:'red',fontSize:'30px'
				},}
		})
	</script>
</body>
</html>

显示效果同上

C、数组语法，将多个样式对象应用到同一个元素上

<!DOCTYPE html>
<html>
<head>
	<title>Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
	<div id='box'>
		<div v-bind:style="[style1,style2]">{{message}}</div>
	</div>
	<script type="text/javascript">
		new Vue({
		    el:"#box",data: {
				style1:{
					color:'red',style2:{
					color:'black'
				},}
		})
	</script>
</body>
</html>

显示效果：

4、条件  v-if  ，显示与隐藏（DOM元素的删除与添加），v-if = "变量名"，在data中用true或false来控制显示和隐藏

html如下：

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

js如下：

var app3 = new Vue({
  el: '#app-3',data: {
    seen: true   //用true、false来控制能否看见内容
  }
})

显示结果:

5、条件  v-else-if 必须和v-if连用 ，格式 v-else-if="变量名"

html如下：

	<div style="width: 100px;height: 100px;background: black;"v-if="show"></div>
	<div style="width: 100px;height: 100px;background: aqua;"v-else-if="hide"></div>
	<div style="width: 300px;height: 300px;background: blue"v-else=""></div><div style="width: 100px;height: 100px;background: black;"v-if="show"></div>
	<div style="width: 100px;height: 100px;background: aqua;"v-else-if="hide"></div>
	<div style="width: 300px;height: 300px;background: blue"v-else=""></div>

js如下：

  var appp = new Vue({        el:"#box",data:{    show:true,hide:false} });

 

显示效果如下：

 

6、条件  v-else 必须和v-if连用，不能单独使用，否则报错：模板编译错误，格式 v-else=""

html如下：

<div style="width: 100px;height: 100px;background: black;"v-if="show"></div>
<div style="width: 300px;height: 300px;background: blue"v-else=""></div>

 

js如下：

 

  var appp = new Vue({        
	el:"#box",data:{
	    show:true,hide:false
	}
  });

显示效果如下：

7、v-show，显示与隐藏，传递的值为布尔值，默认为false，格式v-show=“变量名”，只是设置display属性，元素还存在DOM中

html如下：

 
<div id="box">
    <div style="width: 100px;height: 100px;background: black;display: none" v-show="show"></div>
</div>

js如下：

    new Vue({
        el: "#box",data(){
            return {
                show: true
            }
        }
    })

显示效果如下：

v-show和v-if都是隐藏和显示DOM节点，区别是v-show是给DOM节点设置display属性，而v-if则是在DOM中增加/删除节点。

v-if：

<!DOCTYPE html>
<html>
<head>
	<title>Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
	<div id="box">
	    <div style="width: 100px;height: 100px;background: black;display: none" v-if="show"></div>
	</div>
	
	<script type="text/javascript">
	    new Vue({
	        el: "#box",data(){
	            return {
	                show: false
	            }
	        }
	    })
	</script>
</body>
</html>

在浏览器的DOM渲染效果：

v-show:

<!DOCTYPE html>
<html>
<head>
	<title>Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
	<div id="box">
	    <div style="width: 100px;height: 100px;background: black;display: none" v-if="show"></div>
	</div>
	
	<script type="text/javascript">
	    new Vue({
	        el: "#box",data(){
	            return {
	                show: false
	            }
	        }
	    })
	</script>
</body>
</html>

在浏览器的DOM渲染效果：

8、v-for，循环，绑定数组的数据来渲染一个项目列表，格式 v-for="字段名  in(of) 数组json"

html如下：

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

js如下：

var app4 = new Vue({
  el: '#app-4',data: {
    todos: [
      { text: '学习 JavaScript' },{ text: '学习 Vue' },{ text: '整个牛项目' }
    ]
  }
})

显示效果如下：

9、v-on   绑定事件（处理用户输入）    函数必须写在methods里面，格式v-on:事件名="函数名"，简写@事件名="函数名"

html如下：

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>

js如下：

var app5 = new Vue({
  el: '#app-5',data: {
    message: 'Hello Vue.js!'
  },methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

显示效果：左图是点击按钮签的样式             右图是点击按钮之后的样式

                         

10、v-model，用在表单控件上，用于实现双向绑定数据，如果将v-model用于表单控件以外的标签是没有任何效果的，格式 v-model="变量名",

html如下：

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

js如下：

var app6 = new Vue({
  el: '#app-6',data: {
    message: 'Hello Vue!'
  }
})

显示效果：左图是页面初始化结果，右图是在页面直接修改输入框的值的结果

                   

11、v-text，解析文本，能读取文本，但不能解析html标签（就是如果变量值是html的形式给出，那么读出的值也包含html标签）

v-text   属性值为字符串文本

<!DOCTYPE html>
<html>
<head>
	<title>Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
	<div id="box">
    	<div v-text="msg"></div>
  	</div>

	<script type="text/javascript">
	    new Vue({
         	el: "#box",data:{
                 msg:" 11111"
        	},methods: {
             	    say() {
               	 	alert(111);
            	    }
         	}
    	})
	</script>
</body>
</html>

显示结果：

11111

v-text，属性值为字符串html语句

 

<!DOCTYPE html>
<html>
<head>
	<title>Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
	<div id="box">
    	<div v-text="msg"></div>
  	</div>

	<script type="text/javascript">
	    new Vue({
         	el: "#box",data:{
                 msg:"<p1>11111</p1>"
        	},methods: {
             	    say() {
               	 	alert(111);
            	    }
         	}
    	})
	</script>
</body>
</html>

显示结果：

 

<p1>11111</p1>

12、v-html，能解析html语句，也能读取文本值

v-html，属性值为字符串html语句

<!DOCTYPE html>
<html>
<head>
	<title>Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
	<div id="box">
    	<div v-html="msg"></div>
  	</div>

	<script type="text/javascript">
	    new Vue({
         	el: "#box",methods: {
             	    say() {
               	 	alert(111);
            	    }
         	}
    	})
	</script>
</body>
</html>

显示结果：

11111

v-html，属性值为字符串文本语句

<!DOCTYPE html>
<html>
<head>
	<title>Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
	<div id="box">
    	<div v-html="msg"></div>
  	</div>

	<script type="text/javascript">
	    new Vue({
         	el: "#box",data:{
                 msg:"11111"
        	},methods: {
             	    say() {
               	 	alert(111);
            	    }
         	}
    	})
	</script>
</body>
</html>

显示效果：

11111

v-text和v-html两者都能读取文本，但是v-html能解析字符串html语句

13、v-once，进入页面时只能渲染一次，以后不再渲染。如果用到事件中也只执行一次（@click.once="show"）

<!DOCTYPE html>
<html>
<head>
	<title>Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
	<div id="box">
    	<div v-once>{{msg}}</div>
	</div>

	<script type="text/javascript">
		new Vue({
		    el:"#box",data:{
	            msg:"qwdqwdqwd" 
		    }
		})
	</script>
</body>
</html>

显示效果：

qwdqwdqwd

事件也只响应一次

<!DOCTYPE html>
<html>
<head>
	<title>Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
	<div id="box">
    	<div @click.once="change">{{msg}}</div>
	</div>

	<script type="text/javascript">
		new Vue({
		    el:"#box",data:{
	            msg:"false",flag:1
		    },methods:{
		    	change:function(){
		    		if(this.flag == 1){
		    			this.flag = 0;
		    			this.msg = "true";
		    		}else{
		    			this.flag = 1;
		    			this.msg = "false";
		    		}
		    	}
		    }
		})
	</script>
</body>
</html>

页面初始化效果：

点击false，页面效果

当再次点击的时候，页面没有任何反应

14、v-pre，把标签内的元素原样输出

<!DOCTYPE html>
<html>
<head>
	<title>Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="box">
    <div v-pre>欢迎---{{msg}}</div>
</div>
	<script type="text/javascript">
	    new Vue({
	        el:"#box",data:{
	            msg:"111111"
	        }
   		})
	</script>
</body>
</html>

显示效果：

15、v-cloak，防止闪烁

<!DOCTYPE html>
<html>
<head>
	<title>Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="box">
    <div v-cloak=''>欢迎---{{msg}}</div>
</div>
	<script type="text/javascript">
	    new Vue({
	        el:"#box",data:{
	            msg:"111111"
	        }
   		})
	</script>
</body>
</html>

显示效果：

 

 

原文地址：https://blog.csdn.net/tangxiujiang

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Vuex- Action的 { commit }的写法
https://segmentfault.com/a/1190000022018995 https://www.jianshu.com/p/8c3599dda094 vuex教程中，有这样一句话和这样一段代码： 实践中，我们会经常用到 ES2015 的参数解构来简化代码（特别是我们需要调用commi
ES6模块之export和import详解
ES6 （ECMAScript 6）中的模块是一个包含 JavaScript 代码的文件，在这个模块中所有的变量都对其他模块是不可见的，除非我们导出它。 ES6的模块系统大致分为导出（export）和导入（import）两个模块。 1、模块导出（export） 可以 导出 所有的最外层 函数 、 类
Vue知识点汇总（含Vue3）
from https://mp.weixin.qq.com/s/-rc1lYYlsfx-wR4mQmIIQQ Vue知识点汇总（含Vue3） 一、Vue 基础 1. Vue的基本原理 当一个Vue实例创建时，Vue会遍历data中的属性，用 Object.defineProperty（vue3.0使
npm init vite@latest vue3study --template vue
D:\Temp&gt;npm init vite@latest vue3study --template vuenpm ERR! code ETIMEDOUTnpm ERR! errno ETIMEDOUTnpm ERR! network request to https://registry.np
Vue 中使用消息总线让两个滚动条同步滚动
文章浏览阅读1.2k次。最近自己从零撸起的甘特图组件需要子组件的滚动条同步滚动这就涉及到子组件之间的互相通信，通过 消息总线可以达到我们的需求 ,首先建立一个标志位，拖动左边滚动条的时候，右边的滚动条事件不处理，反之拖动右边滚动条时，左边的滚动条事件不做处理，建立一个公共的变量用于两者的互斥store.jsimport Vue from 'vue'export let store = Vue.observable({ scrollFlag: true})export let mutations =.._vue 能不能同时有两个滚动事件
Vue + lodop 静默打印
文章浏览阅读3.3k次，点赞3次，收藏16次。静默打印是什么？简单来说就是不需要用户点击"打印"，自动去打印，但是使用浏览器web打印不可避免的要弹出以下画面面对这种问题也只能用"富客户端"技术来解决，在浏览器的沙盒安全模型中无法做到，那么只能使用插件的技术，这个我们就不自己花力气去做了，我找来了 lodop 这个免费的打印组件，功能还是挺强大的，下载下图的发行包解压后安装下图两个exe如果你的系统是64位的，可以安装install_lodop64.exe上图的LodopFuncs.js 是客户端要使用的核心库文件..._this.$getlodop().then((lodop) =>{
Vue + DataV + SignalR 数字化大屏展示
文章浏览阅读1.7k次。个人觉得大屏展示其实很简单，噱头多过技术含量，下面使用了 DataV (不是阿里的那个DataV哈，具体链接在这里)开发了一个大屏展示，使用了css flex弹性布局，使用了DataV的一些比较酷炫的边框(SVG写的)，基本上功能没有全部完成，但是模子已经刻出来了，只是后端推送的内容没有全部写出来前端<template> <dv-full-screen-container class="screen-container"> <div class="ti_用signalr做一个简单的实时大屏显示
vue 下使用 exceljs + x-spreadsheet 带样式导入Excel
文章浏览阅读3.4k次，点赞3次，收藏10次。【说明】导入的Excel 字体颜色和背景色只能识别【标准色】,别的如"主题颜色"，exceljs 解析出来不是颜色值。导入的样式包括字体，字号，列宽，合并单元格，【部分能识别】的背景色，文字颜色。导入到 x-data-spreadsheet 如下图。原Excel样式如下。_x-data-spreadsheet
element ui 的 el-tab 当使用 router-view 时 mounted 执行了多次
文章浏览阅读1.7k次。之前参考某文章把 router-view 放在 el-tab-pane 外面都不起作用，问题根本不是出在 el-tab-pane，而是v-for 里面有多个route-view , keep-alive 时 tab 并未销毁掉，而是缓存隐藏了起来。需要把 router-view 的 name 与路由的 index.js 名称对应起来。之前参照很多文章修改试图修正这个问题，结果都徒劳，终于让我找到。我做了如下修改，主页面 main.vue。_el-tab-pane 后面接router-view
解决npm下载包的时候发生的依赖冲突
文章浏览阅读533次。今天在一台虚拟机上面运行老项目，报各种类型上图的错误提示，一开始还以为是less的问题，结果一个个装完还是报错，后面又说webpack, webpack cli有问题，头有点大了，google 一下，发现一个命令。讨论这个命令的文章，可以了解一下。运行以后终于出现了期待已久的。_npm install 忽略依赖
Vue2.0 组件实现动态模板(即Template)
文章浏览阅读8k次，点赞3次，收藏12次。从这篇文章得到启发先定义一个组件从外部接收Template，然后在组件里调用<template > <div ref="markedContent"></div></template><script>import Vue from 'vue/dist/vue.esm.js'export default { name: 'wf-marked-content', props: ['content'], mounte.._vue components 动态传入模板
Vue中使用froala富文本编辑器制作打印模板 + print.js 打印
文章浏览阅读5.4k次。参考上一篇知识开发的一个功能，制作一个打印模板的管理模块，如下(就是保存froala编辑后的html文本，其中包括Vue的Template，这样我们可以利用Vue的模板的优势来动态绑定一些数据源进行HTML的打印,基本上跟过去水晶报表做一个模板再绑定数据源的方法异曲同工)在 main.js 里引用 froala 组件// Import and use Vue Froala lib.import VueFroala from 'vue-froala-wysiwyg'// 引入 Fr.._vue设计网页打印模板
Vue3 使用 script-setup 语法糖
文章浏览阅读992次。计划是这样,公司的项目一直在持续改动,安装包总是需要频繁生成新的,由此我想到了"持续集成"!有自动化工具不用,岂不可惜?这周的主要时间就用来学习CruiseControl.Net全面实现持续集成_怎么在vue的 script部分使用 eldigloa
拿来改造主义，Vue + Element UI + Less 做了一个拖拽条
文章浏览阅读1.2k次。其实Element UI 只用了文字提示的 el-tooltip 组件，不喜欢可以去掉，不记得是从哪拿到的原始代码，我给加了高亮渐变显示，图标，和拖拽时只能拖拽图标的位置，效果如上图，可以水平方向拖动，也可以垂直方向拖动。样式是less写的，css写嵌套样式太繁琐了。拿来主义，改造有理!下面贴代码<template> <div ref="splitPane" class="split-pane" :class="direction" :"{ fl..._element ui拉条样式
vue 下使用 exceljs + x-spreadsheet 带样式导出Excel
文章浏览阅读953次，点赞2次，收藏2次。接上一篇，这次加入的是从x-speadsheet导出Excel，并且带有x-speadsheet中的样式，重点关注 exportExcel 这个方法，我加入了 tinycolor 这个库用来翻译颜色值，值得注意的是， exceljs的颜色值是 argb 不是 rgba，一定不要弄混了a 是代表的透明度放在最前面_x-data-spreadsheet 导出
Vue 动态连接线
文章浏览阅读5.5k次，点赞2次，收藏21次。尝试了两个连线库 jsplumb 和 leadline ，其实两个库都很强大，但是基于个人使用的习惯，决定还是用 leadline ，在Vue 下我使用它的一个包装库 leader-line-vue 下面是上图的连接线示例代码，连接线很轻松的就实现了一个渐变效果..._vue 连线
安装 Element UI 3.0 （即 Element UI Plus） 正确方法
文章浏览阅读4.2k次，点赞2次，收藏5次。首先官网推荐的安装方法没有生成dist文件，导致样式表等这些文件并没有生成npm install element-plus --save以上方法是有问题的，如果不幸执行了上面的命令，那么先执行卸载npm uninstall element-plus删除 main.js文件对element ui的引用，输入以下命令vue add element-plus..._elementui3.0
Vue + Element UI 实现了一个周选择器
文章浏览阅读3.1k次。如上图，下面贴代码<template> <div> <el-date-picker size="large" style ="width:120px" v-model="selectYear" format="yyyy 年" value-format="yyyy" type="year" :clearable = "false" placeholder="选择年">.._vue多选周
自己开发的 Vue 下的甘特图 组件 已上传到GitHub上
文章浏览阅读1.8k次，点赞6次，收藏6次。经过 2021年的一个春节，从年前到现在，大致撸出一个 甘特图，进度条是用SVG画的，使用了几个工具库 （interactjs 用来处理拖拽和修改尺寸，snap.svg 用来处理 svg 的dom 操作，moment.js用来处理时间的操作），其他没有依赖任何的UI组件，目前初见雏形，还比较粗糙，后面会不断更新源码地址点击期间也摸索了怎么把vs code的项目上传到 GitHub 上面进行源代码的管理，基本上是参考的这篇文章做的..._vue gantt demo
封装 x-spreadsheet 带样式导入导出
文章浏览阅读2.1k次。接上两篇vue 下使用 exceljs + x-spreadsheet 带样式导入Excelvue 下使用 exceljs + x-spreadsheet 带样式导出Excel下面封装好一个组件调用组件的页面效果如图，目前“导出Json”还没有做_x-spreadsheet导入导出
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot