Vue绑定属性 绑定Class 绑定style

已于 2023-10-16 15:33:28 修改
阅读量104 收藏
点赞数
分类专栏： Vue 文章标签： vue.js javascript 前端
于 2023-09-04 16:18:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42113716/article/details/132671034
版权

在这里插入图片描述
{{xxx}}—绑定数据
V-bind:title=”xxx”—绑定属性
在这里插入图片描述
在这里插入图片描述
非动态绑定！！！
在这里插入图片描述
数据从后台循环出来，请求api接口获取：

注释无法编写，格式改为html.
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
Vue官网: https://cn.vuejs.org
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
样式绑定：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
动态改变box的宽度：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
左右滑动效果：
在这里插入图片描述

<template>
  <div id="app">
  <!--文本绑定-->
    <hr>
      <div v-bind:title="title">111111</div>
      <div :title="title">222222</div>
    <hr>
</template>
<script>
export default {
//name:"app",
  data(){
     return{
       title:'这是一个文本'
     }
}
</script>
<style>
#app {
  font-family:serif;
  font-size:50px;
  font-style:bold;
  text-align: center;
  color: #f32a10;
  margin-top: 60px;
}
</style>

在这里插入图片描述
静态资源绑定：

<template>
  <div id="app">
  <!--资源绑定-->
  <img  v-bind:src="url"/>
  <img  :src="url"/>
</template>
<script>
export default {
//name:"app",
  data(){
     return{
         url: 'http://localhost:8081/static/image/1.jpg'
      }
}
</script>
<style>
#app {
  font-family:serif;
  font-size:50px;
  font-style:bold;
  text-align: center;
  color: #f32a10;
  margin-top: 60px;
}
</style>

在这里插入图片描述

<template>
  <div id="app">
  <!--图片遍历-->
  <div v-for="(item,index)  in  images" :key="index">
    <img :src="item.src" alt/>
  </div>
</template>
<script>
export default {
  // name:"app",
  data(){
     return{
       images:[
         {'src':'http://localhost:8081/static/image/1.jpg'},
         {'src':'http://localhost:8081/static/image/1.jpg'},
         {'src':'http://localhost:8081/static/image/1.jpg'},
         {'src':'http://localhost:8081/static/image/1.jpg'},
       ]
      }
  }
}
  </script>
<style>
#app {
  font-family:serif;
  font-size:50px;
  font-style:bold;
  text-align: center;
  color: #f32a10;
  margin-top: 60px;
}
</style>

在这里插入图片描述

<template>
  <div id="app">
   <hr>
   {{hs}} 
   <hr>
   <div v-html='hs'></div>
</template>
<script>
export default {
  // name:"app",
  data(){
     return{
       hs:'<h2>这是一个html标签！！！</h2>'
     }
  }
}
</script>
<style>
#app {
  font-family:serif;
  font-size:50px;
  font-style:bold;
  text-align: center;
  color: #f32a10;
  margin-top: 60px;
}
</style>

在这里插入图片描述

<template>
  <div id="app">
   <hr>
   <div v-text="title"></div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
export default {
  // name:"app",
  data(){
     return{
        title:'这是一个文本',
     }
  }
}
</script>
<style>
#app {
  font-family:serif;
  font-size:50px;
  font-style:bold;
  text-align: center;
  color: #f32a10;
  margin-top: 60px;
}
</style>

在这里插入图片描述

<template>
  <div id="app">
   <hr>
   <div v-for="item in list" :key="item">
       {{item}}
   </div>
</template>
<script>
export default {
  // name:"app",
  data(){
     return{
list:['a','b','c','d']
     }
  }
}
</script>
<style>
#app {
  font-family:serif;
  font-size:50px;
  font-style:bold;
  text-align: center;
  color: #f32a10;
  margin-top: 60px;
}
</style>

在这里插入图片描述

<template>
  <div id="app">
  <hr>
   <div v-for="item in list" :key="item">
      <!--默认为蓝色；flag为true时为蓝色-->
      <div v-bind:class="{'red':!flag,'blue':flag}">
        {{item}}
      </div>
   </div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
export default {
  // name:"app",
  data(){
     return{
       list:['a','b','c','d'],
       flag:false
     }
  }
}
</script>
<style>
#app {
  font-family:serif;
  font-size:50px;
  font-style:bold;
  text-align: center;
  color: #4110f3;
  margin-top: 60px;
}
.blue {
  font-family:serif;
  font-size:50px;
  font-style:bold;
  text-align: center;
  color: #f37e10;
  margin-top: 60px;
}
</style>

在这里插入图片描述

<template>
  <div id="app">
   <hr>
   <div v-for="(item,key)  in list" :key="item" 
:class="{'red':key==0,'blue':key==1,'yellow':key==2,'green':key==3}">
        {{key}}--{{item}}
   </div>
</template>
<script>
export default {
  // name:"app",
  data(){
     return{
         list:['a','b','c','d']
     }
  }
}
</script>
<style>
.blue {
  font-family:serif;
  font-size:50px;
  font-style:bold;
  text-align: center;
  color: #5616ec;
  margin-top: 60px;
}

.red {
  font-family:serif;
  font-size:50px;
  font-style:bold;
  text-align: center;
  color: #ec5a16;
  margin-top: 60px;
}

.yellow {
  font-family:serif;
  font-size:50px;
  font-style:bold;
  text-align: center;
  color: #9aec16;
  margin-top: 60px;
}

.green {
  font-family:serif;
  font-size:50px;
  font-style:bold;
  text-align: center;
  color: #629413;
  margin-top: 60px;
}

</style>

在这里插入图片描述

<template>
  <div id="app">
   <!--动态改变区域大小-->
   <div class="box" v-bind:style="{'width':divWidth+'px','height':divHeight+'px'}">
      box
   </div>
</template>
<script>
export default {
  // name:"app",
  data(){
     return{
       divWidth:600,
       divHeight:600
     }
  }
}
</script>
<style>
.box {
  
  width:200px;
  height: 300px;
  background-color: #ec5a16;
  text-align: center;
  line-height: 300px;
}
</style>

在这里插入图片描述
VUE 中图片引入和折叠效果

<template>
  <div class="about">
    <div class="innerbox">
      <div class="toppart">
        <div class="box_margin"></div>
        <div class="imgbox">
          <img src="~@/assets/images/jianjie.png" alt />
        </div>
        <div class="rightTitle">
          <div class="training_center">
            <span>武汉理工大学工程训练中心 — </span>
            <span>简介</span>
          </div>
        </div>
      </div>

      <div class="aboutContent">
        <p>武汉理工大学工程训练中心是学校重要的大学生实践教学基地，拥有实践教学场地面积13500平米，教学仪器设备818台/套，设备总值近1600万元。中心依托于机械工程学科，紧密结合我校为“建材、 交通、汽车”三大行业服务的办学特色，建立具有行业特色的大工程背景环境的机械工程综合实践教学平台，面向全校43个本科专业学生开展机械制造基础认知实训、机械制造工程实训及机械设计及制造综合创新训练。</p>
        <p>中心根据学生专业特点，采用分层次、模块化教学方法，构建具有24个训练项目模块的工程实践教学体系,每年接纳约7000名学生进行工程实践训练，培养具有较强工程综合能力及创新能力的应用型工程技术人才。中心积极推进教学改革,在课程建设、教学改革、实践基地建设及大学生综合创新训练方面取得了丰硕成果：“机械制造工程实训” 课程获湖北省精品课程; "机械类人才工程能力的培养模式的研究与实践”获湖北省优秀教学成果一等奖；中心于2008年被教育部批准立项为国家级实验教学示范中心建设单位，2015年通过教育部验收正式批准为国家级实验教学示范中心；中心积极开展大学生综合创新训练，建成湖北省机电工程综合设计与制造大学生创新活动基地。武汉理工大学工程训练中心将按照国家级实验教学示范中心建设要求，继续深化实践教学改革，为培养“适应能力强，实干精神强，创新意识强”的高素质工程技术人才做出贡献。</p>

        <div class="box_image_show" ref="carouseImg">
          <van-swipe :loop="false" :show-indicators="false" :autoplay="2000">
            <van-swipe-item v-for="(item,index) in img" :key="index">
              <img :src="item.src" alt />
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
    </div>
  </div></template>
<script>
import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
export default {
  data() {
    return {
      centerDialogVisible: false,
      img: [
        { src: require("@/assets/images/jianjie1.jpg") },
        { src: require("@/assets/images/jianjie2.jpg") },
        { src: require("@/assets/images/jianjie3.jpg") },
        { src: require("@/assets/images/jianjie4.jpg") },
        { src: require("@/assets/images/jianjie5.jpg") },
        { src: require("@/assets/images/jianjie6.jpg") },
        { src: require("@/assets/images/jianjie7.jpg") },
        { src: require("@/assets/images/jianjie8.jpg") },
        { src: require("@/assets/images/jianjie9.jpg") }
      ]
    };
  },
  mounted() {
    this.$nextTick(() => {
      new Viewer(this.$refs.carouseImg);
    });
  },
  methods: {}
};</script>


/******************后台折叠效果************************/<template><el-container class="layout-container">
  <el-aside class="aside" :width='isCollapse?"64px":"200px"'>
    <app-aside class="app-aside" :isCollapse="isCollapse"></app-aside>
  </el-aside>
  <el-container>
    <el-header class="header">
      <div class="header-left" style="cursor: pointer;">
        <!--<i :class="{'el-icon-s-fold':isCollapse, 'el-icon-s-unfold': !isCollapse}" @click="BtnClickTrueAndFalse"></i>-->
        <i :class="isCollapse?'el-icon-s-fold':'el-icon-s-unfold'" @click="BtnClickTrueAndFalse"></i>
        <span>直播后台系统</span>
      </div>

      <el-dropdown>
        <div class="header_right">
          <img :src="userInfo.photo">
          <span> {{ userInfo.name }} <i class="el-icon-arrow-down el-icon--right"></i></span>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <i class="iconfont iconpersonal"></i>
            个人设置
          </el-dropdown-item>
          <el-dropdown-item @click.native="BtnOut">
            <i class="iconfont iconout"></i>
            退出
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

    </el-header>
    <el-main class="main">
      <!--路由出口-->
      <router-view></router-view>
    </el-main>
  </el-container></el-container></template>
<script>
import AppAside from "./components/aside";
import {
  getUserProfile
} from "@/api/user";
import {
  log
} from "util";

export default {
  name: "LayouIndex",
  data() {
    return {
      userInfo: {},
      isCollapse: false //侧边菜单栏的展开状态
    };
  },
  components: {
    AppAside
  },
  created() {
    this.loadUserProfile();
  },
  methods: {
    loadUserProfile() {
      getUserProfile().then(res => {
        // console.log(res)
        this.userInfo = res.data.data;
      });
    },
    BtnOut() {
      this.$confirm("确认退出？")
        .then(_ => {
          window.sessionStorage.removeItem("token");
          this.$router.push("/login");
          done();
        })
        .catch(_ => {});
    },
    BtnClickTrueAndFalse() {
      this.isCollapse = !this.isCollapse;
    }
  }
};
</script>
懂你技术
关注
专栏目录
vue计算属性+vue中class与style绑定(推荐)
10-15
#### Class绑定 1. **对象语法**：你可以提供一个对象，键是类名，值是布尔值。如果值为`true`，则对应的类会被添加。 ```html <div v-bind:class="{ active: isActive }"> ``` 2. **数组语法**：你也可以提供...
vue 中动态绑定class 和 style的方法代码详解
08-27
Vue 中动态绑定 Class 和 Style 的方法代码详解 Vue.js 作为一个响应的数据绑定系统，它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。被绑定的 DOM 将与数据保持同步，每当数据有改动，...
VUE: 绑定属性class，绑定style
weixin_62128198的博客
10-14 1208
学习vue的基础属性class和style样式绑定
vue基础：绑定属性class，绑定style
谷咕咕
01-19 1904
vue基础：绑定属性class，绑定style class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。 1.通过v-bind：title="****"来绑定显示鼠标悬停时的信息。 &lt;div v-bind:title="title"&gt;鼠标悬停&lt;/div&gt; title:'我是一个title', 2.通过v-bi...
在Vue中如何动态绑定class和style属性
有我更精彩的博客
02-03 1765
在Vue中，动态绑定class和style属性是我们经常遇到的需求。这个功能允许我们根据不同的条件来动态改变元素的样式，让我们的应用更加灵活和富有交互性。在本篇博客文章中，我将带你深入探索在Vue中如何实现这一功能。
Vue动态绑定Class与Style
长沙火山
03-17 5326
这样可以根据数据的变化来动态改变元素的样式，实现更灵活的样式控制。通过数组语法，可以根据多个条件的组合来决定元素应该添加哪些类，实现更复杂的样式控制。通过数组语法，可以根据多个条件的组合来决定元素应该具有哪些样式，实现更灵活的样式控制。这样，我们可以根据多个条件的组合来动态控制元素的样式，使页面更具交互性和灵活性。数组语法，可以实现更复杂的样式控制，根据多个条件的组合来动态改变元素的样式，满足不同的需求。通过数组语法，可以根据多个条件的组合来动态控制元素的样式，实现更灵活的样式控制。
vue3 Class 与 Style 绑定
JiuMeilove的博客
05-28 1157
数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式。因为 class 和 style 都是 attribute，我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组。
vue绑定多个class和多个style的方式
JackieDYH的博客
06-16 921
class绑定多个 // isActive 为true就会加active的class，同理isRed <div :class="{'active':isActive,'red':isRed}"></div> // 也可以这样写 <div class="red" :class="{'active':isActive}"></div> // 数组的方式 <div :class="[active,red]"></div> // 三目运算
难点三！！！Vue绑定class属性时无效
qq_41818857的博客
06-07 4018
class后面绑定的值应该以{}方式呈现 错误写法： <ul> <li v-for="(item,i) in cityList" @click='select(i)' :class="active:activeIndex===i"> {{item}} </li> </ul> 正确写法： <ul> <li v-for="(item,i)
vue（绑定style属性）
m0_73495603的博客
10-17 5143
以对象方式绑定style
Vue2基础 07：class与style绑定
Fxcrisp的博客
05-26 1380
Vue2基础知识 ：class与style绑定的多种写法和区别
使用 Vue 绑定单个或多个 Class 名的实例代码
08-28
使用 Vue 绑定单个或多个 Class 名的实例代码 在 Vue 中，绑定 Class 名可以使用多种方式，以下我们将详细介绍三种常用的方法。 使用变量形式绑定单个 Class 名 在 Vue 中，我们可以使用变量形式绑定单个 Class ...
vue.js入门教程之绑定class和style样式
10-21
在本篇文章中，我们将深入了解Vue.js中的数据绑定功能，特别是在绑定class和style样式方面的应用。这是初学者学习Vue.js时的一个重要环节，因为样式操作在Web开发中是非常常见和重要的需求。 首先，我们来探讨如何...
扩展el-table，实现当showOverflowTooltip时，鼠标可移入tooltip功能
最新发布
Bitter的博客
11-01 344
1.在utils里创建elTable.js。2.在main.js中引入 并绑在vue上。
基于SSM+VUE历史车轮网站JAVA|VUE|Springboot计算机毕业设计源代码+数据库+LW文档+开题报告+答辩稿+部署教+代码讲解
卓越软件开发的博客
11-01 821
源代码+数据库+LW文档（1万字以上）+开题报告+答辩稿部署教程+代码讲解+代码时间修改教程。
vue-i18n国际化多国语言i18n国际语言代码对照表
aming小老弟
10-31 641
uniapp是自带有i18n这个插件需要自己去给每一个需要国际化的字符去手动配置key，所以如果是已经完成的项目可能工作量就稍微有点大了第一步：语言命名是有规范的不能乱取名，具体可以参考国际语言代码i18n国际语言代码对照表zh_CN 中文(简体) 中国zh_TW 中文(繁体) 中国台湾pt_PT 葡萄牙语 葡萄牙ja_J...
el-table type=“selection“换页多选数据丢失的解决办法
weixin_46112174的博客
11-01 299
设置以后就可以保留之前选中的选项，但还要设置row-key。element里有一个。
若依项目中vue处理字典和后端处理的方法汇总
SSHLY3的博客
10-31 416
但注意使用场景是数据仅拿来做页面展示，如若是修改页面调此接口就不适合。
Vue计算属性与class、style动态绑定实战解析
Vue.js还提供了类（Class）与样式（Style）的绑定功能，这让我们可以根据组件的状态动态地改变元素的样式。类的绑定有三种形式： 1. 字符串形式：使用一个字符串来表示类名，当表达式的值为真时，对应的类会被添加...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值