Vue 的一个易错点( 实现动态点击变色)

<写给自己看的成长路程>

在定义vue模板的样式时,
遵照css 可知可以用 使用 class 与 style 两种方法来写,
值得注意的是如果是: 多个字母的 这里不能用 直接用- 连接, font-size

可以使用 驼峰/ 或者 ’ … ’ , fontSize, 'font-size'

还要一点值得注意的是; 在参与逻辑运算的时候

这时需要动态的判断哪个样式的 显/隐

这时的样式最好 写在css中,因为在vue 实例的定义的样式,并不会生效
例:

本来想实现点击哪个,哪个变色, 发现并不行,也没有报错,

但我吧样式放在style 标签中的时候,就能生效了 , 这也是值得注意的一点

再简单的说一下: 我实现的方法吧,

需求就是点击哪个,那个的样式就发生改变;

既然是这样: 也就是需要一个值可以判断是点在哪里,可是程序不想人一样可以看到的啊,
这时就需要 一个第三者,帮我们实现,这里就像一个id, 一个身份, 可以用来判断点到哪里了,那 那个可以判断呢 当然是这个数本身了,
比如 :在遍历的时候 写上 a==i ,显而易见可以知道,当遍历到i 时,就会变色,
但我们要动态的改变啊,哪里不会点哪里的那种,
那时我们就要 从特殊到一般, 的转变了, 这种类比的方法很重要,是写逻辑的一个好帮手, 既然要变成一般, 这是我们的第三者 就可以上场了,这里代表的就是一个参数
就是 把 变成 x 一个未知数了 x==i(这里的x 要在data中声明,不然会报错)

然后我们的函数就可以登场了: this.x=i (直接把这个值赋值给它)
这里就像变魔术一样,显示他们的相等判断 ;

值得一说的是: 看到好多了人使用过 另一种方法:使用遍历的下标,引入另一个值 j,

在我看来,反而是更加的繁琐了, 使用自身的值,来做判断不就可以了吗,
但本质的思想还是一样的, 就看各种如何取舍了

总结, 驼峰, 模板中单个表达式的使用, 逻辑判断/特例到一般的过程转变

---