uniapp并不支持直接使用浏览器的document
对象,原因在于uniapp的运行环境并不仅仅在浏览器中,还包括各种小程序和app,这些环境中并不存在传统意义上的浏览器document
对象。
可以使用uniapp提供的API替代document
对象的一些功能:
- 需要修改元素样式的话,可以考虑通过数据绑定的方式去改变样式;
- 如果需要获取元素信息,可以使用
uni.createSelectorQuery().select()
接口。
此外,针对JavaScript的dom操作(querySelector
、appendChild
等等),可以使用vue的指令(v-if、v-show、v-for)和属性(v-bind:style、v-bind:class)进行操作。
renderjs
今天要介绍另一个方法,就是使用renderjs
renderjs
是一个运行在视图层的js,仅支持APP端和H5端,实际上H5端本身就支持DOM等,所以renderjs
方案基本上只用于APP端的开发。
官方给出的renderjs
使用例子
设置 script 节点的 lang 为 renderjs
<script module="test" lang="renderjs">
export default {
mounted() {
// ...
},
methods: {
// ...
}
}
</script>
具体的实例
<script >
export default {
data() {
return {
htmlstring:""
}
},
props:["code"],
mounted() {
this.htmlstring = this.code
},
}
</script>
<script module="renderScript" lang="renderjs">
export default {
data() {
return {
}
},
methods: {
onCodeChange(newVal, oldVal, ownerInstance, instance) {
// 创建一个新的div元素
const tempDiv = document.createElement('div')
if(tempDiv){
tempDiv.innerHTML = newVal
// 查找并执行所有的script标签
const scriptTags = tempDiv.querySelectorAll('script')
scriptTags.forEach((script) => {
const scriptTag = document.createElement('script')
scriptTag.textContent = script.innerText
document.body.appendChild(scriptTag)
})
}
},
}
}
</script>
<template>
<view v-html="htmlstring" :htmlstring="htmlstring" :change:htmlstring="renderScript.onCodeChange"></view>
</template>
<style scoped lang="scss"></style>
评论(0)