Vue学习(三)-v-bind指令学习

二,v-bind动态绑定属性

  • v-bind

    语法
    1. 动态绑定一个标签的属性

    2. 只要一个属性被加 v-bind,该属性的值就会被当成模板变量解析

      <img v-bind:src="img1" alt="">
      
      <script>
          var app = new Vue({
                
              el: '#app',
              data: {
                
                  img1: 'imgs/1.jpg'
              },
          })
      script>
      

      在这里插入图片描述

    语法糖写法
    
    <a v-bind:href="url">...a>
    
    
    <a :href="url">...a>
    

v-bind对象语法


class 后面填写的是一个对象

用法一:绑定一个类,根据active的值来选择留下还是删除

<p :class="{active: true}">你好p>

用法二:传入多个值

<p :class="{active: true, big: false}">你好p>

用法三:和class定义的类名不冲突,三个类名会合并

<p class="bgc" :class="{active: true, big: true}">你好p>

用法四:把类名放在一个函数中进行计算后返回

<p class="bgc" :class="getAttr()">你好p>

methods: {
    getAttr: function() {
        return {
            active: this.isActive,
            big: this.isBig
        }
    }
}

v-bind数组语法


class 后面填写一个 数组

  • 示例
<div id="app">
    <p class="bgc" :class="[active, big]">你好p>
    <p class="bgc" :class="getAttr()">你好p>
div>

<script>
    var app = new Vue({
      
        el: '#app',
        data: {
      
            img1: 'imgs/1.jpg',
            active: 'active',
            big: 'big',
        },
        methods: {
      
            getAttr: function() {
      
                return [this.active, this.big]
            }
        }
    })
script>

在这里插入图片描述

v-bind动态绑定Style


我们可以使用 v-bind:style 来绑定一些CSS样式

对象绑定
<div id="app">
    <section :style="{
        fontSize: font1}"> {
    {message}} section>
    <section :style="{
        fontSize: font2 + 'px'}"> {
    {message}} section>
    <section :style="myStyle"> {
    {message}} section>
div>

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!',
        font1: '50px',
        font2: 60,
        myStyle: {
            color: 'red',
            fontSize: '70px'
        }
    }
})

Vue学习(三)-v-bind指令学习_第1张图片

数组绑定
<div id="app">
    <section :style="[baseStyle, baseStyle1]"> {
     {
     message}} </section>
</div>

var app = new Vue({
     
    el: '#app',
    data: {
     
        message: 'Hello Vue!',
        baseStyle: {
     
            color: 'gold',
            backgroundColor: 'black',
            fontSize: '50px'
        },
        baseStyle1: {
     
            width: '200px'
        }
    }
})

Vue学习(三)-v-bind指令学习_第2张图片

案例1:点击切换Class

<style>
    .active {
      
        color: red;
    }

    .big {
      
        font-size: 20px;
    }

    .bgc {
      
        background-color: aqua;
    }
style>
head>

<body>
    <div id="app">
        <p class="bgc" :class="{active: isActive, big: isBig}">你好p>
        <button @click="btnClick">按钮button>
    div>

    <script>
        var app = new Vue({
      
            el: '#app',
            data: {
      
                img1: 'imgs/1.jpg',
                isActive: true,
                isBig: true,
            },
            methods: {
      
                btnClick: function() {
      
                    this.isActive = !this.isActive;
                    this.isBig = !this.isBig;
                }
            }
        })
    script>
body>

Vue学习(三)-v-bind指令学习_第3张图片

你可能感兴趣的:(Vue框架学习)