v-bind绑定元素属性

v-bind用于绑定元素的属性

例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <span>{{ message }}</span> <br>
   <a v-bind:href="home" target="_blank">戳我戳我戳我</a>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    home:'http://www.baidu.com/'
  }
})
</script>
</html>

 v-bind的缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

 

posted @ 2021-04-23 10:50  EF果果  阅读(66)  评论(0)  编辑  收藏  举报