2021即将到了,趁这几天休息时间继续记录之前项目中遇到的一些小问题。
1.v-html 注意的问题
v-html可以对一些字符串进行渲染成html方式展示。但是查看文档里面在设置样式,文档中提及到一些注意的地方。前几天在使用过程也遇到了这样的问题存在。
2.v-html 设置引起样式不起作用
当样式设置了scoped的时候,想对渲染后的样式做处理。加上了scoped就会不起作用。文档里面也提及到整个原因。
<style scoped>
....设置样式
</style>
例如,我们做一个小实验。我想对里面图片进行设置缩放,由于图片在远程加载后太大了影响了美观。想做一下处理。如下代码。
<template>
<div id="app">
<div class="html-container" v-html="result"></div>
</div>
</template>
<script>
export default {
data(){
return {
result:'<img src="//img13.360buyimg.com//n0/jfs/t1/137958/10/5896/48774/5f3cdb80Ea3d9cfc3/1d8969fec9b61a94.jpg">'
}
},
methods: {
}
}
</script>
<style scoped>
.html-container img{
max-width: 300px;
max-height: 300px;
}
</style>
当第一次看到这个图片的时候发现呈现很大。可以看出.html-container img 样式并没有起到作用。
第二,参考文档进行修改。新增一个style的标签处理,将需要修正图片的样式写在这个标签内。看如下的代码设置。
<style>
.html-container img{
max-width: 300px;
max-height: 300px;
}
</style>
<style scoped>
/* .html-container img{
max-width: 300px;
max-height: 300px;
} */
</style>
修改后的效果会和自己预期一样。对比之下,可以看到在第二次设置后样式生效了。这也提及这个v-html的问题在书写的时候注意的地方。我想应该不少人在使用的时候会中招。只好记录一下先。文档里面还提及道v-html这个安全性。这里还需要打个点留意一下项目的问题是否会发生。
3.vuejs的变化
这几年vuejs变化真大,vue2.x到vue3.x迁移,大前端的趋势还是不断。作为前端,我想学习框架同时也要继续接触一下原生。否则框架变化了,很多套路就不适用了。