本次主要介绍Vue的基本指令：v-bind 属性绑定
使用工具：HbuilderX
什么叫属性绑定？
属性绑定是指将Vue中的数据与 HTML 元素的属性之间建立关联，使它们保持同步。像之前讲到的插值表达式就是一种。
属性绑定有两种，一种是单向，一种双向。单向即是Vue的数据传给HTML，如果HTML的数据发生变化，则不会传给Vue。双向就是双边互传数据。今天主要讲的是单向绑定：v-bind。
v-bind怎么用？
v-bind:属性名：是单向绑定的写法。在下列代码中， v-bind:href="baidu.url" 即绑定下面data中的baidu的url。同理 v-bind:style。
:href="csdn.url" 便是上面v-bind:href 的 简写 。两种写法都可以。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>csdnWebPage</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id='app'>
<a v-bind:href="baidu.url" v-bind:style="baidu.color">
跳转到 {{ baidu.name }}
</a>
<br>
<a :href="csdn.url" :style="csdn.color">
跳转到 {{ csdn.name }}
</a>
</div>
<script>
var lemon = {
data() {
return {
baidu: {
name: '百度',
url: 'https://www.baidu.com',
color: 'color: red;',
},
csdn: {
name: 'CSDN',
url: 'https://www.csdn.net/',
color: 'color: blue;',
},
}
},
methods: {},
}
var app = Vue.createApp(lemon)
app.mount('#app')
</script>
</body>
</html>下一篇：介绍...双向绑定
735
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
