DAY20240903 VUE:v-html,点击高亮的实践，vue2动态切换class和style，vue3动态切换和style，以及两者的区别

一、v-html

引入：为了页面安全问题，确保标签是后端生产出来的，而不是恶意用户在输入框输入的，避免恶意脚本的问题导致跨站脚本攻击。这时候{{}}不解析不解析html片段。17

那怎样才能将17行中加粗的渲染到页面上？11 与13 对比，发现11不能渲染出来，13放在div里并且加一个v-html便可以正常渲染出来。13 19

二、点击变色

需求：点哪个，哪个就高亮。
思路：先有一个列表，点击事件？修改状态

步骤1 列表的基本渲染

步骤2 样式的设置

步骤3 高亮class的设置

步骤4 如何放置这个高亮设置？

动态绑定current，当current和Index相等时，class=‘active’，否则class=‘’ 用到了三目运算符 因为就是高亮与否的问题，只有两个选择，所以可以用三目运算符。
怎么设置current的值，点击的时候current设置为索引值。这时候current就满足和index相等的条件，自然就高亮了。
34-36 46-51

三、vue2 动态切换class

要是想让class的可选择项有aa bb cc 让他们三个值组合

对象写法

先定义class名字 aa bb cc dd 16-24

动态绑定对象，34行 对象的定义在41-45.以后通过改变classobj就实现了多个class切换。

vue过期不候，只有在初始化的时候把data里的所有东西进行拦截。后面再加dd就不会被拦截

解决方案：Vue.set(对象，属性，true)。这招叫亡羊补牢

拦截之后后面再用vm.classobj.dd赋值为true或者false，就可以了，因为已经拦截过了。

vue3就不要再使用Vue.set(对象，属性，true)，支持动态增加属性的拦截，也就是说本来就好用这一块。

数组写法

数组后期增加和删除同样拦截不到（后期动态添加属性监听不到）。但是数组重写了pop push这些方法，表面上看起来是可以用的。

四、vue2 动态切换style

对象写法

：style=“styleobj” 37行

styleobj对象定义在data里面，js里面属性用驼峰，颜色用单引号 50 51 52

改变该对象的该属性的值是好用的。

一个对象再动态增加属性是不好用的，拦截不到，vue底层es5拦截不到，如图所示。

解决方案是Vue.set(vm.styleobj,“fontSize”,“30px”)
在这之后再写vm.styleobj.fontSIze=16px可以修改。

数组写法

：style=“stylearr”

stylearr数组定义在data里面，不过行内的数组有点麻烦

动态添加 vm.stylearr.push({fontSize:“30px”})
数组不用考虑动态添加拦截不到的问题。

假设你想继续替换当时的颜色和大小，同样还是push就可以，会自动覆盖当前的值，保留最后push的值。

总结vue2与vue3的区别：

五、 vue3动态创建class与style

引入vue3 第7行

创建一个div id是box {{10+20}}并不能被正确解析出来，报错：Vue不是一个构造函数
非面向对象的开发
Vue.createApp().mount(“#box”)
挂到box节点上，{{10+20}}能被计算出来

初始化改了一次。然后data成了函数式，reurn回来的才是真正的对象。两个不同的组件可以返回相同的名字，为了保护每个组件中的状态值。

动态切换 对象写法 18

后期动态添加属性直接成功了！！44行