杭州做网站的公司,七牛做网站,网站建设的技术体会,北京西站进站最新规定官方示例不能直接粘贴使用#xff0c;故自己补了些代码。方便初学者学习#xff0c;节省时间#xff0c;提高学习效率。
1、html代码#xff1a;
!doctype html
html langen
headmeta charsetUTF-8meta nam…官方示例不能直接粘贴使用故自己补了些代码。方便初学者学习节省时间提高学习效率。
1、html代码
!doctype html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title20-vue3- markdown 编辑器.html/title
!-- 加载项可以本地加载也可网联加载用ai提示生成网联代码--script src./dist/vue.global.js/scriptscript src./lodash/lodash.js/scriptscript src./marked/marked.min.js/scriptscript// 动态标题var dynamicTitle 20-vue3- markdown 编辑器.html.slice(0, -5);// 使用 JavaScript 修改 title 标签的内容document.title dynamicTitle;/script
/head
bodydiv idapph1{{input}}/h1h1{{output}}/h1
!--keyup.enterupdate 在textarea的内容输入后按enter按键触发 update方法--div classeditortextarea classinput :valueinput keyup.enterupdate/textareadiv classoutput v-htmloutput/div/div/divscript typemoduleconst { createApp, ref,computed } Vue// marked 把textarea的内容进行解析并返回html格式。// 如“# hello” 会被解析为“h1hello/h1”const { parse} marked// lodash的debounce函数防抖函数单位为毫秒默认为1000毫秒即1秒// 如如这例子中在1秒内输入了多次最终只会执行一次。const {debounce} _createApp({components:{},setup() {const input ref(# hello)const output computed((){return parse(input.value)})const update debounce((e) {input.value e.target.value}, 1000)return {input,output,update}}}).mount(#app)/script/body
/html
2、结果
