vue.js v-bind 可以做些什麼事呢

最新推荐文章于 2024-11-25 22:30:49 发布

原创最新推荐文章于 2024-11-25 22:30:49 发布 · 89 阅读

0 ·

CC 4.0 BY-SA版权

vue 同时被 2 个专栏收录

36 篇文章

订阅专栏

29 篇文章

订阅专栏

本文详细介绍了在Vue.js中使用v-bind进行动态属性和class绑定的方法。通过实例展示了如何根据数据状态动态改变元素的class，以及如何绑定动态的属性如src和href。这为创建响应式和动态的用户界面提供了强大的工具。

v-bind 動態綁定class


<h2 v-bind:class=“{active:isActive,line:isLine}”>{{message}}</h2>
<button @click=‘btnClick’>按鈕</button>


data:{
     message:’hello’,
      isActive:true,
      inLine:true
},
methods:{
//點擊過程改變狀態
     btnClick:function(){
        this.isActive = !this.isActive ,
}

v-bind 動態綁定屬性

<img v-bind:arc=“imgURL” alt=“”>
<a v-bind:href=“hello”>百度一下啊</a>



date:{
     message:’hello world’,
     imgURL:’http://xxxx/xxx.com’,
     hello:’http://baidu.com’
 }