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

最新推荐文章于 2024-06-06 10:14:42 发布

zhaihaohao1

最新推荐文章于 2024-06-06 10:14:42 发布

阅读量343

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/88941921

版权

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

摘要由CSDN通过智能技术生成

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

源码（复制即可使用）
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>
    <!--数组里面第一个元素变成红色-->
    <