欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue传一个参数绑定多个class的一种方法

程序员文章站 2022-03-07 19:14:49
...

页面结构:两个页面,一个存放要绑定的数据页面,一个是被绑定的页面,通过prpos绑定

目的:实现传一个数据绑定多个class的内容,

思路:
1,把绑定传递的数据作为数据头,定义不同的数据身体达到绑定不同数据
2.绑定页面判断这个头是否存在,存在就绑上不存在就不绑
代码
数据页面

  1. <template>
  2. <div classprefix="classprefix"></div>
  3. </template>
  4. <style>
  5. .classprefix-content{
  6. }
  7. .classprefix-wrapper{
  8. }
  9. </style>

绑定页面

  1. <template>
  2. <div>
  3. <div :class="classprefix && `${classprefix}-wrapper`"></div>
  4. <div class="contenner" :class="classprefix && `${classprefix}-content`"></div>
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. props:['classprefix'],
  10. components: { },
  11. name: "Layout",
  12. };
  13. </script>