Day03-Vue：v-bind

最新推荐文章于 2024-08-18 23:25:39 发布

为什么瘦的人也会胖

最新推荐文章于 2024-08-18 23:25:39 发布

阅读量121

点赞数 1

文章标签： vue java javascript

本文链接：https://blog.csdn.net/qq_56567593/article/details/115962623

版权

v-bind 动态绑定属性

之前用vue中的mustache语法来方便内容的动态绑定，但是某些属性我们也希望能动态绑定

例如：a元素的herf属性，img元素的src属性
在这里插入图片描述

这里错误的原因在于，mustache语法不能用于属性中，只能用于内容中。

v-bind的语法糖（简写）

：

在这里插入图片描述

v-bind用于绑定class(对象语法)

由于v-bind是用于动态绑定属性的，而class也属于属性的一部分，所以v-bind也可以用于绑定class
除了可以简单的绑定data中获取的string，也可以获取布尔值，如：
在这里插入图片描述
v-bind：class = ‘这里可以写对象key：value’，用于比如一个列表，要求其在点击之前是一个颜色，点击之后就得换个颜色，这时候可以设置一个button，用v-on绑定监听事件，当点击之后，class中的布尔值就会跟着改变，从而使其的class发生改变，进而改变其颜色

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            color:red;
        }
    </style>
</head>
<body>
<div id="app">
<!--    <h2 class="active">{{message}}</h2>-->
<!--    <h2 :class="ac">{{message}}</h2>-->
<!--    <h2 v-bind:class="{key1:value1,key2:value2}">{{message}}</h2>-->
<!--    <h2 v-bind:class="{类名1:true,类名2:boolean}">{{message}}</h2>-->
    <h2 class="title" v-bind:class="{active:isActive,line:isLine}">{{message}}</h2>
    <button v-on:click="btnClick" >按钮</button>

</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello',
            ac: 'active',
            isActive:true,
            isLine:true
        },
        methods:{
            btnClick:function () {
                this.isActive = !this.isActive
            }
        }
    })
</script>
</body>

在这里插入图片描述
如果项目中有需要一直存在的class可以直接写到前面，和动态绑定的共存

v-bind用于绑定class(数组语法)

<div id="app">
    <h2 :class="['active',line]">{{message}}</h2>
    <h2 :class="getClasses()">{{message}}</h2>

</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello',
            active:'aaaaa',
            line:'bbbbbb'
        },
        methods:{
            getClasses: function () {
                return [this.active,this.line]
            }
        }
    })

在这里插入图片描述

v-bind用于绑定style(对象语法)

在这里插入图片描述

这个是错的因为vue在编译的时候会把50px识别为一个变量，会从下面data中找这个变量，所以要加上单引号（key可以不加单引号，但是value必须要加）

<div id="app">
<!--    <h2 :style="{key(属性名):value(属性值)}">{{message}}</h2>-->
<!--    <h2 :style="{fontSize:'50px'}">{{message}}</h2>-->
  <h2 :style="{fontSize:finalSize +'px','color':finalColor}">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
      el: '#app',
      data: {
          message: 'hello',
          fSize:'100px',
          finalSize:100,
          finalColor:'red',
      }
  })
</script>

如果嫌style内容过多，可以将方法抽取到下方

<h2 :style=getStyles()>{{message}}</h2>
...
methods:{
           getStyles:function () {
               return {fontSize:this.finalSize +'px','color':this.finalColor}
           }
       }

v-bind用于绑定style（数组语法）

<div id="app">
   <h2 :style="[baseStyles,baseStyles1]">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
   const app = new Vue({
       el: '#app',
       data: {
           message: 'hello',
           baseStyles:{background:'red'},
           baseStyles1:{fontSize:'100px'}
       }
   })
</script>

为什么瘦的人也会胖

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day03-Vue：v-bind

v-bind 动态绑定属性之前用vue中的mustache语法来方便内容的动态绑定，但是某些属性我们也希望能动态绑定例如：a元素的herf属性，img元素的src属性这里错误的原因在于，mustache语法不能用于属性中，只能用于内容中。v-bind的语法糖（简写）：v-bind用于绑定class(对象语法)由于v-bind是用于动态绑定属性的，而class也属于属性的一部分，所以v-bind也可以用于绑定class除了可以简单的绑定data中获取的string，也可以获取布尔值，如：
复制链接

扫一扫