1-3.vue指令:v-bind指令

最新推荐文章于 2024-03-11 11:30:50 发布

堵车了

最新推荐文章于 2024-03-11 11:30:50 发布

阅读量435

点赞数 3

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45660035/article/details/110679807

版权

vue 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

1-3.vue指令:v-bind指令

v-bind的作用

v-bind的主要作用是用来绑定标签里面的属性值，如标签里面的href的值，class里面需要添加的一些class,style里面要添加的一些样式等

v-bind的语法糖

语法糖的含义就是对某个内容的简写，v-bind的语法糖为":"。

v-bind的基本使用

1.代码展示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src='../js/vue.js'></script>
  <title>Document</title>
</head>

<body>
  <div id='app'>
    <!-- v-bind绑定a标签的href属性 -->
    <a v-bind:href="aHref">点击跳转</a>

    <!-- v-bind的语法糖的书写 -->
    <a :href="aHref">点击跳转</a>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        aHref: 'www.baidu.com'
      }
    });
  </script>

</body>

</html>

2.步骤分解

在这里插入图片描述

v-bind动态绑定class或style属性

1.语法书写

    <h2 v-bind:class="{class名：boolean值，class名：boolean值}"></h2>
    <h2 :class="{class名：boolean值，class名：boolean值}"></h2>
    <h2 v-bind:style="{属性名：属性值，属性名：属性值}"></h2>
    <h2 :style="{属性名：属性值，属性名：属性值}"></h2>

2.代码展示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src='../js/vue.js'></script>
  <title>Document</title>
</head>
<style>
  .colorshow {
    color:red;
  }
  .fontshow {
    font-size: 20px;
  }
</style>

<body>
  <div id='app'>
    <!-- <h2 v-bind:class="{class名：boolean值，class名：boolean值}"></h2> -->
    <!-- <h2 :class="{class名：boolean值，class名：boolean值}"></h2> -->
    <h2 :class="{colorshow: isColor, fontshow: isFont}">{{message}}</h2>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '展示v-bind如何动态绑定class属性',
        isColor: true,
        isFont: true
      }
    });
  </script>

</body>

</html>

3.步骤分解

在这里插入图片描述

4.简化

在这里插入图片描述

堵车了

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
1-3.vue指令:v-bind指令

1-3.vue指令:v-bind指令v-bind的作用v-bind的主要作用是用来绑定标签里面的属性值，如标签里面的href的值，class里面需要添加的一些class,style里面要添加的一些样式等v-bind的语法糖语法糖的含义就是对某个内容的简写，v-bind的语法糖为":"。v-bind的基本使用1.代码展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫