小白第一次接触Vue.js，使用v-for设置背景图片，同时有几个知识点包含在这个demo里,先上代码：
<?php
header("Content-type:text/html;charset=utf-8");
//从数据库里查询所有房间
select_query("fn_room", '*');
while ($con = db_fetch_array()) {
$rooms[] = $con;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<link href="/NewUI/css/bootstrap.css" rel="stylesheet"/>
<link href="/NewUI/css/mui.min.css" rel="stylesheet">
<link href="/NewUI/css/common.css" rel="stylesheet"/>
</head>
<body>
<div id="app" class="items">
<ul>
<a :href="'/qr.php?room='+item.roomid" v-for="(item, index) in rooms">
<li class="cell-item" v-bind:style="{ 'background-image': 'url(' + item.img + ')','background-repeat':'no-repeat','background-size':'100%' }">
<div class="cell-item-center">{{item.roomname}}</div>
<div class="cell-item-foot">
<span class="cell-item-foot-left">在线人数：{{item.person}}人</span>
<span class="cell-item-foot-right">玩家点数：{{item.point}}点</span>
</div>
</li>
</a>
</ul>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
rooms: <?php echo json_encode($rooms) ?>,
},
});
</script>1、php将$rooms集合赋值给Vue.js，使用的是:
rooms: <?php echo json_encode($rooms) ?>注意：不需要添加双引号“ ”，需要使用json_encode()把集合数组转换成json，如果加双引号就变成了字符串。
2、vue.js绑定背景图片，需要使用v-bind:style
<li class="cell-item" v-bind:style="{ 'background-image': 'url(' + item.img + ')','background-repeat':'no-repeat','background-size':'100%' }">3、vue.js绑定a标签链接，用<a :href=" ">，前面是有冒号的
<a :href="'/qr.php?room='+item.roomid" v-for="(item, index) in rooms">v-for循环标签自身获取属性，不需要加{{}}双括号了。
扫一扫
3840
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
