Vue学习3----Vue绑定属性，绑定html,绑定class,绑定style

最新推荐文章于 2025-02-17 15:12:51 发布

原创最新推荐文章于 2025-02-17 15:12:51 发布 · 406 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了Vue.js中如何绑定组件属性、HTML内容、class样式和style样式。通过实例代码展示了在App.vue文件中的具体用法，并提供了源码下载链接供读者实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：
在这里插入图片描述

源码（复制即可使用）
App.vue 文件

<!--04Vue绑定属性，绑定html,绑定class,绑定style-->
<template>
  <!--根节点-->
  <div id="app">
    <div>{{msg}}</div>
    <!--绑定属性-->
    <img v-bind:src="imgurl">
    <!--绑定属性简写，省略v-bind -->
    <img :src="imgurl">
    <!--绑定html,放在div里面-->
    <div v-html="ihtml"></div>
    <!--绑定数据（另一种方法是：直接两层的花括号）-->
    <div v-text="msg2"></div>
    <!--绑定class,绑定的是下面的 red 属性  -->
    <div v-bind:class="{'red':true}">翟浩浩，改变世界3</div>
    <div v-bind:class="{'red':flag,'blue':!flag}">翟浩浩，改变世界4</div>
    <!--数组里面第一个元素变成红色-->
    <!--循环数租，拿到索引值是0的，为红色-->
    <ul>
      <li v-for="(item,key) in list" v-bind:class="{'red':key==0,'blue':key==1}">
        {{'key>>>'+key+'value>>>'+item }}
      </li>
    </ul>
    <!--绑定style-->
    <div class="box" v-bind:style="{'width':boxWith+'px'}">

    </div>

  </div>
</template>

<script>
  //暴露模块
  export default {
    name: 'app',
    //数据
    data() {
      return {
        msg: '翟浩浩，改变世界',
        msg2: '翟浩浩，改变世界2',
        imgurl: 'http://www.cdpf.org.cn/ywzz/xcwh_263/gzdt_264/201412/W020141231638892400544.jpg',
        ihtml: '<h2>标题二</h2>',
        flag: false,
        //数组
        list: ['元素一', '元素二', '元素三'],
        boxWith:'200',
      }
    }
  }
</script>

<style lang="scss">
  .red {
    color: red;
  }

  .blue {
    color: blue;
  }
  img{
    width: 100px;
    height: 100px;
  }
  .box{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
  }

</style>

源码下载：
vuedemo04
https://download.youkuaiyun.com/download/zhaihaohao1/11112017