Vuejs 动态绑定属性

最新推荐文章于 2024-03-19 10:54:16 发布

苦涩2020

最新推荐文章于 2024-03-19 10:54:16 发布

阅读量357

点赞数

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

本文链接：https://blog.csdn.net/userpython/article/details/108296514

版权

前端同时被 2 个专栏收录

80 篇文章 1 订阅

订阅专栏

Vuejs

8 篇文章 0 订阅

订阅专栏

v-bind 基础用法

<div id='app'>
  <!-- 错误做法，mustache只能用在content中 -->
  <img src="{{imgURL}}">
  <img src="imgURL">  

  <!-- 正确做法，使用v-bind指令 -->
  <img v-bind:src="imgURL">
  
  <!-- 语法糖：简写 -->
  <img :src="imgURL">
  <a :href="aHref">百度</a>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
      imgURL: 'https://i0.hdslb.com/bfs/archive/e62b6b095ef38dfb742687f11e4b570dde420b5d.png',
      aHref: 'http://www.baidu.com'
    }
  })
</script>

v-bind 动态绑定class(对象语法)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs</title>
    <script src="js/vue.js"></script>
    <style>
      .active{
        color: red;
      }
      .font{
        font-size: 50px;
      }
    </style>
</head>
<body>
<div id='app'>
  <h2 class="active">{{message}}</h2>
  <!-- v-bind 传入对象 -->
  <!-- <h2 :class="{key1: val1, key2: val2}">{{message}}</h2> -->
  <!-- <h2 :class="{类名1: 布尔值1, 类名2: 布尔值2}">{{message}}</h2> -->
  <!-- <h2 :class="{active: isActive, font: isFont}">{{message}}</h2> -->

  <!-- <h2 :class="{active: isActive, font: isFont}">{{message}}</h2> -->
  <!-- 如果过于复杂，可以放在一个method或者computed中 -->
  <h2 :class="getClass()">{{message}}</h2>
  <button v-on:click = "btnClick">按钮</button>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
      isActive: 'true',
      isFont: 'true'
    },
    methods: {
      btnClick: function(){
        this.isActive = !this.isActive
      },
      getClass: function(){
        return {active: this.isActive, font: this.isFont};
      }
    }
  })
</script>

</body>
</html>

v-bind 动态绑定class(数组语法)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs</title>
    <script src="js/vue.js"></script>
    <style>
      .active{
        color: red;
      }
      .font{
        font-size: 50px;
      }
    </style>
</head>
<body>
<div id='app'>
  <h2 class="active">{{message}}</h2>
  <!-- 传入数组 -->
  <!-- <h2 :class="[active, font]">{{message}}</h2> -->
  <h2 :class="getClass()">{{message}}</h2>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
      active: 'aaaa',
      font: 'bbbb'
    },
    methods: {
      getClass: function(){
        return [this.active, this.font];
      }
    }
  })
</script>

</body>
</html>

v-bind 动态绑定style（对象语法）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id='app'>
  <!-- v-bind动态绑定style 传入对象方式 -->
  <!-- '50px' 必须加上单引号，否则当成变量 -->
  <h2 :style="{fontSize: '50px', color: 'red'}">{{message}}</h2>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello'
    }
  })
  
</script>

</body>
</html>

v-bind 动态绑定style（数组语法）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id='app'>
  <!-- v-bind动态绑定style 传入数组方式 -->
  <h2 :style="[basesStyle1, basesStyle2]">{{message}}</h2>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
      basesStyle1: {fontSize: '50px'},
      basesStyle2: {color: 'red'}
    }
  })
  
</script>

</body>
</html>

苦涩2020

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vuejs 动态绑定属性

v-bind 基础用法<div id='app'>  <img src="{{imgURL}}"> <img src="imgURL">  <img v-bind:src="imgURL">  <img :src="imgURL".
复制链接

扫一扫