h5学习笔记：v-html 下的一些小陷阱

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迁移，大前端的趋势还是不断。作为前端，我想学习框架同时也要继续接触一下原生。否则框架变化了，很多套路就不适用了。