Vue——属性绑定

最新推荐文章于 2024-06-03 17:48:06 发布

-森木-

最新推荐文章于 2024-06-03 17:48:06 发布

阅读量131

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/senmu_/article/details/113618737

版权

前端专栏收录该内容

69 篇文章 0 订阅

订阅专栏

属性绑定

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性

例一：class 设置一个对象，从而动态的切换 class
在这里插入图片描述

<style>
.active {
	width: 100px;
	height: 100px;
	background: green;
}
</style>
</head>
<body>
<div id="app">
  <div v-bind:class="{ 'active': isActive }"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true
  }
})
</script>

例二：超链
在这里插入图片描述

<div id="div1">
    <a v-bind:href="page">网址链接</a>
</div>
    
<script>
  
new Vue({
      el: '#div1',
      data:{
          page:'http://12306.com'
      }
    })
    
</script>