03-v-bind动态绑定属性

最新推荐文章于 2023-01-10 10:47:35 发布

无味无感

最新推荐文章于 2023-01-10 10:47:35 发布

阅读量235

点赞数

分类专栏： VueJs

本文链接：https://blog.csdn.net/qq_41863998/article/details/117701066

版权

VueJs 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

bind的使用

v-bind使用场景是在我们要动态给元素属性赋值时，就需要用到v-bind；mustache语法时不能解决这个问题的
v-bind语法糖写成冒号就好了
v-bind在操作选择器的时候还可以传对象、数组;并且不会覆盖之前的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>
    .Active {
      color:red;
    }
  </style>
</head>
<body>
<div id="app">
<!--  mustache语法只能在元素内容里面使用-->
<!--  <img src="{{imgUrl}}" alt="">-->

<!--  当我们要给元素中的属性动态赋值时，请使用bind；它会自动解析出来你想要的-->
  <img v-bind:src="imgUrl" alt="">

<!--  语法糖写法-->
  <img :src="imgUrl" alt="">

<!--  动态给属性绑定对象-->
<!--  <h1 class="title" :class="{Active:isActive, Line:inLine}">中国人</h1>-->
<!--  <button v-on:click="btnClick">点击</button>-->

<!--  给选择器传数组-->
  <h1 class="title" :class="['Active', 'Line']">中国人</h1>
  <h1 class="title" :class="getClasses()">中国人</h1>

</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue ({
    el:'#app',
    data:{
      imgUrl:'../img/test/生命地球.jpg',
      isActive:true,
      inLine:true,
      thisActive:'Active',
      thisLine:'Line'
    },
    methods:{
      getClasses:function (){
        return [this.thisActive,this.thisLine];
      },
      btnClick:function () {
        this.isActive = !this.isActive;
      }
    }
  })
</script>
</body>
</html>

无味无感

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
03-v-bind动态绑定属性

bind的使用v-bind使用场景是在我们要动态给元素属性赋值时，就需要用到v-bind；mustache语法时不能解决这个问题的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"><!-- mustac
复制链接

扫一扫