- 在vue中，有时需要根据dom中不同的参数，css中的属性使用不同的值，如果根据不同的条件绑定不同的类名，会显得小题大做，也感觉代码比较臃肿。例如，我们要封装一些扩展性和定制化比较强的组件，通过简单的传参就可以使代码更清晰和灵活。
对于一般的传参，使用var接收，如：
<div :style="{'--color':this.list.length>3?'#88d78e':'#fd9890'}" class="alarm-content">
{{content}}
</div>
.alarm-content{
background-color: var(--color);
}
2. 有时候，使用伪类如“after”“before”等，里面的内容content要根据要求进行动态改变，如：对伪类content中的内容使用国际化，则就需要将content的内容设为变量，并将变量绑定到dom中以动态传参形式实现等。
对于特殊形势下的动态传参，使用attr接收,如：
<div class="node-arrival" toa="离开"></div>
.node-arrival {
&::after {
content: attr(toa);
}
}3. 有时候，由于一些业务上的限制，如该项目不是vue+scss形式，只是简单的html+css形式的页面，为了语义化清晰方便后期维护，那么以上方式可能有些不太合适，单独看html文件完全不知道是什么内容。这时候我们可以使用给dom添加属性的方式，增加可读性。
<h2 data-lang-ch="标题" data-lang-en="title"></h2>
<h3 data-lang-ch="段落" data-lang-en="paragraph"></h3>
<h4 data-lang-ch="描述" data-lang-en="summary"></h4>
/**ch**/
html:lang(ch) [data-lang-ch]:after{
content: attr(data-lang-ch);
}
/**en**/
html:lang(en) [data-lang-en]:after{
content: attr(data-lang-en);
}很简单，各自取各自对应的属性即可，需要什么语言直接在html添加属性即可，也不需要什么js。结合css地址选择器，可以很轻松的实现根据地址来适配各种语言。
<body>
<div id="ch"></div>
<div id="en"></div>
<h2 data-lang-ch="标题" data-lang-en="title"></h2>
<h3 data-lang-ch="段落" data-lang-en="paragraph"></h3>
<h4 data-lang-ch="描述" data-lang-en="summary"></h4>
<a href="#ch">中文</a>
<a href="#en">英文</a>
</body>
[data-lang-ch]:after,
#ch:target~[data-lang-ch]:after{
content: attr(data-lang-ch);
}
#en:target~[data-lang-en]:after{
content: attr(data-lang-en);
}但是该方式的缺点也很明显，虽然以上跳过js实现了国际化需求，语义化也清晰，但是如果说是一些动态内容，比如时间，就没法放在属性里面的，这种情况就只能通过js来处理了，实属无奈。另外如果页面复杂，或者需适配语言太多，那就意味着属性要写很多，显得很臃肿。
以上主要探讨了两种完全不同的国际化方式，前两种主流，最后一种完全属于另类，但还是有用武之地的。如果你的页面不太复杂，完全可以采取这种方式。实际业务中可以根据需要和实际场景选择合适的方式。
原创文章，作者：Ferrycoln，如若转载，请注明出处：https://ms200.cn/archives/1998
