<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<!-- v-bind 可以写成 : -->
<!-- v-bind 一般帮定属性,用得最多的就是 img 标签和 a 标签 ,这两个经常需要更换属性值 -->
<div id="app"></div>
<template id="root">
<div>
<a v-bind:href="url">baidu</a><br>
<a :href="url">baidu</a><br>
<!-- 绑定对象 -->
<a v-bind:href="info">baidu</a>
</div>
</template>
<script>
const app = Vue.createApp({
template:"#root",
data() {
return{
url:'http://www.baidu.com',
// 绑定对象
info:{
href:'http://www.baidu.com',
name:'baidu',
ID:'baiduid'
}
}
}
})
app.mount("#app")
</script>
</body>
</html>