Vue第三天(动态绑定属性(imgURL)等等)

最新推荐文章于 2024-04-05 11:51:36 发布

json{shen:"jing"}

最新推荐文章于 2024-04-05 11:51:36 发布

阅读量3k

点赞数 22

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_53415999/article/details/126916354

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

v-bind的基本使用：

<img v-bind:src="imgURL" alt="">
<a v-bind:href="aHerf"></a>

:href/src/class
<img :src="imgURL" alt="">
<a :href="aHerf"></a>

<div id="app">
    <!-- 错误的做法这里不能使用Mustache语法 -->
    <!-- <img v-bind:src="{{imgURL}}" alt=""> -->
    <!-- 正确的做法使用v-bind指令 -->
    <img v-bind:src="imgURL" alt="">
    <a v-bind:href="aHerf"></a>
    <!-- 语法糖写法 -->
    <img :src="imgURL" alt="">
    <a :href="aHerf"></a>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊",
        imgURL:"https://cn.bing.com/th?id=OIP.NaSKiHPRcquisK2EehUI3gHaE8&pid=Api&rs=1",
        aHerf:"http://www.baidu.com"
      }
    })
  </script>

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

注意语法糖的写法以及相关this的指向问题

<style>
    .active{
      color:red;
    }
  </style>
</head>
<body>
  <div id="app">
    <!-- <h2 class="active">{{message}}</h2>
    <h2 :class="active">{{message}}</h2> -->

    <!-- 动态绑定class对象用法  -->
    <!-- <h2 :class="{key1:value1,key2:value2}">{{message}}</h2>
    <h2 :class="{类名1:true,类名2:boolean}">{{message}}</h2> -->
    <h2 class="title" :class="{active:isActive}">{{message}}</h2>
    <h2 class="title" :class="getClasses()">{{message}}</h2>
    <button @click="change">点击变色</button>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊",
        active:"active",
        isActive:true
      },
      methods: {
        change(){
          this.isActive = !this.isActive//默认是黑色
        },
        getClasses(){
          return {active:this.isActive}
        }
      },
    })
  </script>

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

三种方式！！！！

<h2 class="title" :class="['active','line']">{{message}}</h2>

<h2 class="title" :class="[active,line]">{{message}}</h2>
<h2 class="title" :class="getClasses()">{{message}}</h2>

<div id="app">
    <!-- 加上单引号当成字符串 -->
    <h2 class="title" :class="['active','line']">{{message}}</h2>
    <!-- 不加会被当成变量 -->
    <h2 class="title" :class="[active,line]">{{message}}</h2>
    <h2 class="title" :class="getClasses()">{{message}}</h2>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊",
        active:"aaaa",
        line:'bbbb'
      },
      methods: {

        getClasses(){
          return [this.active,this.line]
        }
      },
    })
  </script>

v-for和v-bind的结合：

<style>
    .active{
      color:red;
    }
  </style>
</head>
<body>
  <div id="app">

    <ul>
      <li v-for="(item, index) in movies" :key="index" :class="{active:index===currentIndex}" @click="changeColor(index)" >{{index+"---"+item}}</li>
    </ul>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        currentIndex:0,
        movies:["海王","海贼王","火影忍者","复仇者联盟"]
      },
      methods: {
        changeColor(index){
          this.currentIndex = index
        }
      },
    })

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

<div id="app">



<h2 :style="{fontSize:'50px'}">{{message}}</h2>

<h2 :style="{fontSize:fontSize}">{{message}}</h2>
<h2 :style="getStyle()">{{message}}</h2>

</div>

<div id="app">

    <!-- <h2 :style="{key(属性名):value(属性值)}">{{message}}</h2> -->
    <!-- 加单引号，当成字符串解析 -->
    <h2 :style="{fontSize:'50px'}">{{message}}</h2><!-- 也可以是'{fontSize:"50px"}' -->
    <!-- 不加单引号，变量解析 -->
    <h2 :style="{fontSize:fontSize}">{{message}}</h2><!-- 从data里面拿 -->
    <h2 :style="getStyle()">{{message}}</h2><!-- 写成方法从methods里面拿 -->

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊",
        fontSize:'100px'
      },
      methods: {
        getStyle(){
          return {fontSize:this.fontSize}
        }
      },
    })
  </script>

第二种：

<div id="app">


    <h2 :style="[baseStyle]">{{message}}</h2>

    <h2 :style="getStyle()">{{message}}</h2>


  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊",
        baseStyle:{backgroundColor:'red'}
      },
      methods: {
        getStyle(){
          return [this.baseStyle]
        }
      },
    })
  </script>

汇总:

4.1 v-bind的基本使用

某些时候我们并不想将变量放在标签内容中，像这样`<h2>{{message}}</h2>`是将变量h2标签括起来，类似js的innerHTML。但是我们期望将变量`imgURL`写在如下位置，想这样`<img src="imgURL" alt="">`导入图片是希望动态获取图片的链接，此时的imgURL并非变量而是字符串imgURL，如果要将其生效为变量，需要使用到一个标签`v-bind:`，像这样`<img v-bind:src="imgURL" alt="">`，而且这里也不能使用Mustache语法，类似`<img v-bind:src="{{imgURL}}" alt="">`，这也是错误的。此时vue对象中定义的`imgURL`变量和`aHerf`变量可以动态的绑定到img标签的src属性和a标签的href属性。`v-bind:`由于用的很多，vue对他有一个语法糖的优化写法也就是`:`，此时修改imgURL变量图片叶重新加载。

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

有时候我们期望对Dom元素的节点的class进行动态绑定，选择此Dom是否有指定class属性。例如，给h2标签加上`class="active"`，当Dom元素有次class时候，变红`<style>.active{color:red;}</style>`，在写一个按钮绑定事件，点击变黑色，再次点击变红色。定义两个变量`active`和`isActive`，在Dom元素中使用`:class={active:isActive}`，此时绑定的`class='active'`，isActive为true，active显示，定义方法change()绑定在按钮上，点击按钮`this.isActive = !this.isActive`，控制Dom元素是否有`class='active'`的属性。

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

class属性中可以放数组，会依次解析成对应的class。

1. 加上单引号的表示字符串

2. 不加的会当成变量

3. 可以直接使用方法返回数组对象

4.4 v-for和v-bind结合

使用v-for和v-bind实现一个小demo，将电影列表展示，并点击某一个电影列表时候，将此电影列表变成红色。v-for时候的index索引，给每行绑定事件点击事件，点击当行是获取此行索引index并赋值给`currentIndex`，使用`v-bind:`绑定class，当`index===currentIndex`Dom元素有active的class，颜色变红。

4.5 v-bind动态绑定style

4.5.1 v-bind动态绑定style(对象语法

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

类似绑定class，绑定style也是一样的。