<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>属性绑定</title>
</head>
<body>
<div id="test">
<!-- 使用v-bind指令绑定 -->
<a v-bind:href="url" v-bind:style="color">跳转百度</a>
<hr>
<!-- 使用简写模式: 以及属性绑定表达式模式-->
<a :href="'http://' + url1" :style="'color:' + color1">跳转有道</a>
</div>
<script>
const app = new Vue({
el:"#test",
data:{
msg:"Hello 属性绑定!",
url:"https://www.baidu.com",
url1:"fanyi.youdao.com/",
color:"color:#FF0000",
color1:"#FF00FF"
}
})
</script>
</body>
</html>
效果截图