html变成表格代码转换成VUE3代码？

来源：蜘蛛抓取(WebSpider) 时间：2023-11-26 08:46 标签： html变成表格
v-text指令v-html指令对于普通文本，其实这个命令和v-text是没有差异的。如下图所示。而对于v-html的话类似是超链接的形式，大概可以理解为超链接的形式。总结：1、解析文本使用v-text、解析html需要使用v-html。2、v-text无论什么指令，都只会解析为文本！v-on指令基础主要就是为元素绑定事件，进行操作。简要代码如下。注意，在方法的内部要拿到数据，需要用this命令。总结：1、事件名不需要写on。2、指令可以简写为@。3、绑定的方法定义在methods属性之中。4、方法内部通过this关键字可以访问定在data中的数据。计数器逻辑是：为按钮绑定点击事件。数据定义在data中。方法定义在methods中即可。具体思路如下：代码案例模板如下：
项目中需要使用到wangeditor，这里封装一个自定义组件，便于后期使用。首先，官方文档：https://www.wangeditor.com/1：安装npm i wangeditor --save 2：组件代码Wangeditor.vue Wangeditor.tsimport { onMounted, onBeforeUnmount, ref, watch } from 'vue'; // 引入wangeditor组件 import WangEditor from 'wangeditor'; // 引入代码高亮组件 import hljs from 'highlight.js' // 公共状态文件 import { webScoketObject } from "/@/hooks/common"; // 官方文档：https://doc.wangeditor.com/ export default { name: 'Wangeditor', setup(props: any, content: any) { // 获取编辑器实例html const editor = ref(); // 编辑器实例对象 let instance: any = ''; /** * @name: 监听公共状态栏值变化(控制抽屉显示) * @author: camellia * @email: guanchao_gc@qq.com * @date: 2021-01-10 */ watch( () => webScoketObject.is_click_send, () => { if (webScoketObject.is_click_send) { instance.txt.clear(); webScoketObject.is_click_send = false; } } ); /** * @name: 生命周期函数-----挂载完成 * @author: camellia * @email: guanchao_gc@qq.com * @date: 2021-01-19 */ onMounted(() => { // 编辑器实例对象 instance = new WangEditor(editor.value); //插入代码语言配置 instance.config.languageType = [ 'Bash', 'C', 'C#', 'C++', 'CSS', 'Java', 'JavaScript', 'JSON', 'TypeScript', 'Plain text', 'Html', 'XML', 'SQL', 'Go', 'Kotlin', 'Lua', 'Markdown', 'PHP', 'Python', 'Shell Session', 'Ruby', 'typescript' ] // 自定义菜单 instance.config.menus = [ // 'head', // 'bold', //字体加粗 // 'fontSize',//字号 // 'fontName',//字体 // 'italic', // 'underline',//下划线 // 'strikeThrough',//删除线 // 'indent', // 'lineHeight', 'foreColor', // 'backColor', 'link', // 'list',//列表 // 'todo', // 'justify',//对其 // 'quote',// 引用 'emoticon', 'image', // 'video',//视频 // 'table',//表格 'code', // 'splitLine', // 'undo',//撤销 // 'redo',//恢复 ]; // 代码高亮 instance.highlight = hljs; // 开启本地上传图片(这是后端上传链接) instance.config.uploadImgServer = '/upload-img'; // 限制上传图片格式 instance.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp']; // 开启本地上传视频(这是后端上传链接) instance.config.uploadVideoServer = '/api/upload-video'; // 设置编辑器高度 instance.config.height = 150; // 设置编辑器页面层级 instance.config.zIndex = 10; // 设置编辑器placeholder instance.config.placeholder = '请输入您的文字！'; // 配置编辑器显示颜色 instance.config.colors = [ '#000000', '#eeece0', '#1c487f', '#4d80bf' ]; // 忽略粘贴内容中的图片 instance.config.pasteIgnoreImg = true; Object.assign(instance.config, { // wangeditor 值发生变化的时候 onchange() { // 将值传递至父组件 content.emit('getWangEditorValue', instance.txt.html()); }, // 上传网络图片回调 linkImgCallback(src:string){ console.log('图片 src ', src) }, // 上传网络视频回调 onlineVideoCallback(video:string) { // 自定义回调内容，内容成功插入后会执行该函数 console.log('插入视频内容', video) } }); instance.create(); }); /** * @name: 生命周期函数-----页面卸载之前 * @author: camellia * @email: guanchao_gc@qq.com * @date: 2021-01-19 */ onBeforeUnmount(() => { instance.destroy(); instance = null; }); return { editor, }; }, }; 3：调用实例： 4：最终效果有好的建议，请在下方输入您的建议。欢迎访问个人博客https://guanchao.site欢迎访问小程序：

我要回帖

更多关于 html变成表格 的文章

 

随机推荐