动态绑定属性

最新推荐文章于 2024-09-14 11:07:52 发布

不是死水

最新推荐文章于 2024-09-14 11:07:52 发布

阅读量265

点赞数

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

本文链接：https://blog.csdn.net/weixin_57976362/article/details/118229433

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

引入vue.js文件

1.v-bing的基本使用

  <script src="../js/vue.js"></script>

  <div id="add">
    <img v-bind:src="imgUrl" alt="">
    <!-- 语法糖 简写 -->
    <!-- <img :src="imgUrl" alt=""> -->
  </div>
  <script>
    const add = new Vue({
      el: '#add',
      data: {
        imgUrl: 'https://img0.baidu.com/it/u=2151136234,3513236673&fm=26&fmt=auto&gp=0.jpg'
      }
    })
  </script>

通过v-binf：把imgUrl动态添加到img里面

v-bing：语法糖 = " : "

2.v-bing动态绑定class（对象语法）

  <style>
    .active {
      color: skyblue;
    }
    .txt {
      font-size: 32px;
    }
  </style>

<div id="add">
    <div class="txt" :class="{active: isactive }">hello word</div>
    <button v-on:click="btnClick">按钮</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const add = new Vue({
      el: '#add',
      data: {
        isactive :true,
      },
      methods: {
        btnClick: function(){
          this.isactive = !this.isactive
        }
      }
    })
  </script>

1.通过{}绑定一个类。

定义两个变量active和isActive，在Dom元素中使用:class={active:isActive}，此时绑定的 class='active'，isActive为true，active显示，定义方法btnClick()绑定在按钮上，点击按钮this.isActive = !this.isActive，控制Dom元素是否有class='active'的属性。

2.和普通类同时共存，并不冲突

和普通的类合并，形成多个类

3.若绑定的对象过于复杂，可以放在一个methods中，通过一个函数来调用

<div id="add">
    <!-- <div class="txt" :class="{active: isactive,link: islink }">hello word</div> -->
    <div class="txt" :class="act()">hello word</div>
    <button @click="btnClick">按钮</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const add = new Vue({
      el: '#add',
      data: {
        isactive :true,
        islink: true
      },
      methods: {
        btnClick: function(){
          this.isactive = !this.isactive
        },
        act: function(){
          return {active: this.isactive,link: this.islink }
        }
      }
    })
  </script>

3.v-bing动态绑定class（数组语法）

<body>
  <div id="add">
    <div class="txt" :class="[active,link]">hello word</div>
    <div class="txt" :class="ace()">hello word</div>
  </div>
  <script src="../js/vue.js"></script> 
  <script>
    const add = new Vue({
      el: '#add',
      data: {
        active: 'aaa',
        link: 'bbb'
      },
      methods: {
        ace: function(){
          return [this.active,this.link]
        }
      }
    })
  </script>

1.通过：绑定数组，数组内元素不能添加 " ",添加引号相当于是字符串

2. 同对象语法一样，若绑定的对象过于复杂，可以放在一个methods中，通过一个函数来调用

4.v-bing动态绑定style（对象语法）

1.通过：绑定style，在{ key，value }中，key添加css的标签，value不添加引号就是变量，

<div id="add">
   <div :style = "{fontSize: fainlsize + 'px',backgroundColor:fainlcolor}">hello word</div>
</div>
  <script src="../js/vue.js"></script>
  <script>
    const add = new Vue({
      el: '#add',
      data: {
        fainlsize: 50,
        fainlcolor: 'skyblue'
      }
    })
  </script>

2.若绑定的对象过于复杂，可以放在一个methods中，通过一个函数来调用

<div id="add">
    <!-- <div :style = "{fontSize: '50px',backgroundColor:'skyblue'}">hello word</div> -->
    <!-- <div :style = "{fontSize: fainlsize + 'px',backgroundColor:fainlcolor}">hello word</div> -->
    <div :style = "sty()">hello word</div>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const add = new Vue({
      el: '#add',
      data: {
        fainlsize: 50,
        fainlcolor: 'skyblue'
      },
      methods: {
        sty: function(){
          return {fontSize: this.fainlsize + 'px',backgroundColor:this.fainlcolor}
        }
      }
    })
  </script>

5. v-bing动态绑定style（数组语法）

  <div id="add">
    <h2 :style = "[style1,style2]">hello word</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const add = new Vue({
      el: '#add',
      data: {
        style1: {fontSize: '25px'},
        style2: {backgroundColor: 'red'}
      }
    })
  </script>

通过：动态绑定style里，采用数组语法，在数组中设置两个变量，在数据中设置变量