1146 字
4 分钟阅读
Vue – v-bind
简介
Vue v-bind
代码演示
<html>
<head>
<title>Vue v-bind</title>
<style>
table, th, td {
border: 1px solid black;
width: 500px;
text-align: center;
}
table {
border-collapse: collapse;
}
</style>
</head>
<body>
<div id = "app">
<table>
<thead>
<th>ID</th>
<th>头像</th>
<th>姓名</th>
<th>年龄</th>
</thead>
<tbody>
<tr v-for="emp in empList" :key = "emp.id">
<td>{{emp.id}}</td>
<!-- v-bind 属性绑定 -->
<!-- v-bind:属性名 = "属性值" 绑定属性 -->
<!-- 简化 :属性名 = "属性值" -->
<!-- 其中属性值可以填变量，会自动替换成变量值 -->
<!-- 例子 -->
<!-- v-bind:src = "属性值" 绑定src属性 -->
<!-- :alt = "属性值" 绑定alt属性 -->
<td><img v-bind:src = "emp.img" :alt = "emp.name" width="50px"></td>
<td>{{emp.name}}</td>
<td>{{emp.age}}</td>
</tr>
</tbody>
</table>
</div>
<script type="module">
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data(){
return {
empList: [
{
id: 1,
img: "http://blog.zqat.top/wp-content/uploads/2025/05/cropped-b_4661cf5da8cf1caafe9574a52f3f9430.jpg",
name: '小王',
age: 18
},
{
id: 2,
img: "http://blog.zqat.top/wp-content/uploads/2025/05/cropped-b_4661cf5da8cf1caafe9574a52f3f9430.jpg",
name: '小李',
age: 19
},
{
id: 3,
img: "http://blog.zqat.top/wp-content/uploads/2025/05/cropped-b_4661cf5da8cf1caafe9574a52f3f9430.jpg",
name: '小张',
age: 20
}
]
}
}
}).mount('#app')
</script>
</body>
</html>效果
