博客列表 >vue传一个参数绑定多个class的一种方法

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

南瓜又个梦
南瓜又个梦原创
2021年09月23日 21:33:441090浏览

页面结构:两个页面,一个存放要绑定的数据页面,一个是被绑定的页面,通过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>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议