前段时间做页面时需要动态设置背景图片,每一种框架都会遇见类似的需求,特记录下来,以免不时之需:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            li span {
                width: 100px;
                height: 100px;
                border-radius: 999px;
                border: 1px solid red;
                background-position: center center;
                -webkit-background-size: cover;
                background-size: cover;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <ul id="app">
            <li v-for= "item in a">
                <span :style="{backgroundImage: 'url(' +item.b+ ')'}">111</span>            
            </li>
        </ul>
    </body>
    <script src="js/vue.js"></script>
    <script>
        var a= new Vue({
            el: "#app",
            data: {
                a: [{b: './img/gintama.jpg'},
                {b: './img/glass.jpg'},
                {b: './img/leader.jpg'}]
            }
        })
    </script>
</html>
View Code

相关文章:

  • 2021-11-30
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-10-11
  • 2021-09-27
  • 2022-12-23
  • 2021-08-07
  • 2023-01-29
  • 2021-12-15
  • 2022-12-23
相关资源
相似解决方案