AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Vue入门---属性、style和class绑定方法

2018-08-28 1460
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 一 、用对象的方法绑定class 1 DOCTYPE html> 2 3 4 5 class与style绑定 6 7 8 9 .

一 、用对象的方法绑定class

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4    <meta charset="UTF-8">
 5    <title>class与style绑定</title>
 6    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 7    <script src="../../node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
 8    <style>
 9       .class1{
10          color: #f00;
11       }
12       .class2{
13          background-color: #00f;
14       }
15    </style>
16 </head>
17 <body>
18 <div class="test">
19    <div class="otherClass" :class="{'class1':name1,'class2':name2}">我是娃哈哈</div> <!--方法一:用对象的方式实现  name1和name2是boolean型,为true时给元素加上对应的class，为false不添加-->
20 </div>
21 <script type="text/javascript">
22    var myVue = new Vue({
23       el:".test",
24       data: {
25          name1: true,
26          name2: false,
27       }
28    })
29 </script>
30 </body>
31 </html>

 

实现效果:

 

 

关于使用对象绑定class,还可以用另外一种写法:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4    <meta charset="UTF-8">
 5    <title>class与style绑定</title>
 6    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 7    <script src="../../node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
 8    <style>
 9       .class1{
10          color: #f00;
11       }
12       .class2{
13          background-color: #00f;
14       }
15    </style>
16 </head>
17 <body>
18 <div class="test">
19    <div class="otherClass" :class="classObj">我是娃哈哈</div> <!--方法一:用对象的方式实现 ,true给元素加上对应的class，为false不添加-->
20 </div>
21 <script type="text/javascript">
22    var myVue = new Vue({
23       el:".test",
24       data: {
25          classObj: {
26             class1: true,
27             class2: false,
28          }
29 
30       }
31    })
32 </script>
33 </body>
34 </html>

 

实现效果:

 

 

二 、用数组的方法绑定class

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4    <meta charset="UTF-8">
 5    <title>class与style绑定</title>
 6    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 7    <script src="../../node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
 8    <style>
 9       .class1{
10          color: #f00;
11       }
12       .class2{
13          background-color: #ff0;
14       }
15    </style>
16 </head>
17 <body>
18 <div class="test">
19    <div class="otherClass" :class="[name1,name2]">我是娃哈哈</div> <!--方法二:用数组的方式实现 -->
20 </div>
21 <script type="text/javascript">
22    var myVue = new Vue({
23       el:".test",
24       data: {
25             name1: 'class1',
26             name2: 'class2',
27 
28       }
29    })
30 </script>
31 </body>
32 </html>

 

实现效果:

 

其实在数组中还可以用判断是否显示这个类名,举个例子:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4    <meta charset="UTF-8">
 5    <title>class与style绑定</title>
 6    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 7    <script src="../../node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
 8    <style>
 9       .class1{
10          color: #f00;
11       }
12       .class2{
13          background-color: #ff0;
14       }
15    </style>
16 </head>
17 <body>
18 <div class="test">
19    <div class="otherClass" :class="[name1, isShow? name2 : '']">我是娃哈哈</div> <!--方法一:用数组的方式实现 ，采用三元表达式,条件为true时显示-->
20 </div>
21 <script type="text/javascript">
22    var myVue = new Vue({
23       el:".test",
24       data: {
25             name1: 'class1',
26             name2: 'class2',
27             isShow: false,
28 
29       }
30    })
31 </script>
32 </body>
33 </html>

 

实现效果是:

 

三、  用数组和对象混合的方法绑定class

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4    <meta charset="UTF-8">
 5    <title>class与style绑定</title>
 6    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 7    <script src="../../node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
 8    <style>
 9       .class1{
10          color: #f00;
11       }
12       .class2{
13          background-color: #ff0;
14       }
15    </style>
16 </head>
17 <body>
18 <div class="test">
19    <div class="otherClass" :class="[name1, {class2 :isShow}]">我是娃哈哈</div> <!--方法三:用数组对象组合的方式实现，条件为true时显示-->
20 </div>
21 <script type="text/javascript">
22    var myVue = new Vue({
23       el:".test",
24       data: {
25             name1: 'class1',
26             class2: 'name2',
27             isShow: true,
28 
29       }
30    })
31 </script>
32 </body>
33 </html>

 

实现的效果:

 

四、 用对象的方式实现style绑定

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4    <meta charset="UTF-8">
 5    <title>class与style绑定</title>
 6    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 7    <script src="../../node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
 8    <style>
 9       .class1{
10          color: #f00;
11       }
12       .class2{
13          background-color: #ff0;
14       }
15    </style>
16 </head>
17 <body>
18 <div class="test">
19    <div class="otherClass" :style="{color: color, width: width + 'px'}">我是娃哈哈</div> <!--方法三:用对象的方式实现-->
20 </div>
21 <script type="text/javascript">
22    var myVue = new Vue({
23       el:".test",
24       data: {
25             color: 'red',
26             width: 100,
27 
28       }
29    })
30 </script>
31 </body>
32 </html>

 

实现效果如下:

 

其实也可以写为第二种方式:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4    <meta charset="UTF-8">
 5    <title>class与style绑定</title>
 6    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 7    <script src="../../node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
 8 </head>
 9 <body>
10 <div class="test">
11    <div class="otherClass" :style= "styleObj">我是娃哈哈</div> <!--方法三:用对象的方式实现-->
12 </div>
13 <script type="text/javascript">
14    var myVue = new Vue({
15       el:".test",
16       data: {
17          styleObj: {
18             color: 'red',
19             width: '200px',
20          }
21 
22 
23       }
24    })
25 </script>
26 </body>
27 </html>

 

实现结果是:

五、 用数组和对象混合的方式实现style绑定

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4    <meta charset="UTF-8">
 5    <title>class与style绑定</title>
 6    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 7    <script src="../../node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
 8 </head>
 9 <body>
10 <div class="test">
11    <div class="otherClass" :style= "[styleObj1,styleObj2]">我是娃哈哈</div> <!--方法三:用对象的方式实现-->
12 </div>
13 <script type="text/javascript">
14    var myVue = new Vue({
15       el:".test",
16       data: {
17          styleObj1: {
18             color: 'red',
19             width: '200px',
20          },
21          styleObj2: {
22             backgroundColor: '#ff0'
23          }
24 
25 
26       }
27    })
28 </script>
29 </body>
30 </html>

 

实现效果：

六、绑定属性

v-bind:src=""

width/height/title....

简写：:src=""   推荐

<img src="{{url}}" alt=""> 效果能出来，但是会报一个404错误
<img v-bind:src="url" alt=""> 效果可以出来，不会发404请求   推荐使用

以上就是vue中绑定style和class还有属性的方法，希望对大家有帮助！

 

文章标签：
JavaScript
前端开发
关键词：
style VUE.js
class VUE.js
vue style VUE.js
vue class VUE.js
vue class绑定VUE.js
半指温柔乐
目录
相关文章
心疼你的一切
|
10月前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中，class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定，可以动态更新元素的 class 属性，支持对象和数组语法，适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式，Vue 会根据数据变化自动更新 DOM。
心疼你的一切
215 3
代码bug生产队
|
存储 JavaScript 前端开发
前端开发：Vue.js入门与实战
【10月更文挑战第9天】前端开发：Vue.js入门与实战
代码bug生产队
263 1
846903522
|
JavaScript API 开发者
十分钟 带你强势入门 vue3
十分钟 带你强势入门 vue3
846903522
207 1
nanshaws
|
JavaScript
vue3完整教程从入门到精通（新人必学2，搭建项目）
本文介绍了如何在Vue 3项目中安装并验证Element Plus UI框架，包括使用npm安装Element Plus、在main.js中引入并使用该框架，以及在App.vue中添加一个按钮组件来测试Element Plus是否成功安装。
nanshaws
524 0
vue3完整教程从入门到精通（新人必学2，搭建项目）
小王老师呀
|
JavaScript 前端开发 C#
从入门到放弃，我们为何从 Blazor 回到 Vue
【10月更文挑战第29天】在前端开发中，许多开发者从尝试新技术 Blazor 最终回到熟悉的 Vue。主要原因包括：1) Blazor 学习曲线陡峭，Vue 上手容易；2) Vue 开发工具成熟，开发效率高；3) Vue 性能优异，优化简单；4) Vue 社区庞大，生态丰富；5) 项目需求和团队协作更适配 Vue。选择技术栈需综合考虑多方面因素。
小王老师呀
1251 0
夏志121
|
前端开发 JavaScript
Vue.js中class与style的增强绑定
Vue.js中class与style的增强绑定
夏志121
196 0
技术小牛人
|
Web App开发 前端开发 JavaScript
Vue.js Class与Style绑定
技术小牛人
976 0
webmirror
|
前端开发 JavaScript
vue中class与style的绑定
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性 ，我们可以用v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时， Vue.js 专门增强了它。
webmirror
2029 0
大黄有故事
|
JavaScript
Vue.js之Class 与 Style 绑定
数组语法： 我们可以把一个数组传给 v-bind:class ，以应用一个 class 列表： wo data: { activeClass: 'active', err...
大黄有故事
852 0
34789737
|
3月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中，兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线，大型项目建议使用Pinia等状态管理工具，确保数据流清晰可控，避免内存泄漏。
34789737
330 2

热门文章

最新文章

  • 1
    vue过渡动画
  • 2
    【3】npm run build Vue的项目，如何修改相对路径配置
  • 3
    Ant Design Vue子表格展开只展开一行，其他行折叠
  • 4
    Vue 项目使用 json-editor (二)
  • 5
    Vue-cli中 vue.config.js 的配置详解
  • 6
    vue3导入excel并转化成数组
  • 7
    ECharts用法及常用配置项详解（Vue环境）
  • 8
    解决Vue 3 + Element Plus树形表格全选多选以及子节点勾选的问题
  • 9
    从0搭建Vue3组件库之Icon组件
  • 10
    一个“非常简单”的Vue表达式编辑组件
  • 1
    基于ssm+vue.js的中国咖啡文化宣传网站附带文章和源代码设计说明文档ppt
    177
  • 2
    基于ssm+vue.js的铁岭河医院医患管理系统附带文章和源代码设计说明文档ppt
    119
  • 3
    基于ssm+vue.js的校园代购服务订单管理系统附带文章和源代码设计说明文档ppt
    204
  • 4
    基于ssm+vue.js的海鲜自助餐厅系统附带文章和源代码设计说明文档ppt
    117
  • 5
    基于ssm+vue.js的农家乐信息平台附带文章和源代码设计说明文档ppt
    121
  • 6
    基于ssm+vue.js的德云社票务系统附带文章和源代码设计说明文档ppt
    124
  • 7
    基于ssm+vue.js的个人博客网站附带文章和源代码设计说明文档ppt
    155
  • 8
    基于ssm+vue.js的高校共享单车管理系统附带文章和源代码设计说明文档ppt
    260
  • 9
    基于ssm+vue.js的智慧城市实验室主页系统附带文章和源代码设计说明文档ppt
    145
  • 10
    基于ssm+vue.js的lw管理系统附带文章和源代码设计说明文档ppt
    94

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索
    • 下一篇
    「直播预告」Streaming Lakehouse Meetup EP.2｜Paimon × StarRocks 共话实时湖仓