vue开发文档总结-ing

禾苗种树

已于 2023-02-17 16:15:16 修改

阅读量238

点赞数

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

于 2022-11-07 09:08:24 首次发布

本文链接：https://blog.csdn.net/m0_45011929/article/details/127688297

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

📖

a链接动态拼接

<a v-bind:href="['/static/book/'+id+'.txt']"  v-bind:download="book.name">txt2</a>

style 动态绑定

//html
  <div  v-bind:style="bgObj">
       <span class="center" ></span>
    </div>

///JS
data(){
        return{
            bgObj:{},//cd 背景图片设置
        }
    },
    //...省略vue的js文件布局
    //...
    //...

//通过页面加载时传入的参数对该变量设置值
that.bgObj = {'background':`url(${music.img})`};

//方法二
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
  }

class 类名动态绑定
试验了诸多，还是只能两种形式分开写，即现成的class没法和和来通过判断添加的类名写在一个{}里，
```
 <div class="centerBox commonFlex" v-bind:class="{animateRing:iSring}">
     <span class="center" ></span>
 </div>
```