Vue入门---属性、style和class绑定方法-低调大师

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

2018-08-27 544

一、用对象的方法绑定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还有属性的方法，希望对大家有帮助！

微信关注我们

原文链接：https://yq.aliyun.com/articles/631776

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

JAVA面试核心教程｜Java面试基础知识点总结

Java中的原始数据类型都有哪些，它们的大小及对应的封装类是什么？ byte——1 byte——Byte short——2 bytes——Short int——4 bytes——Integer long——8 bytes——Long float——4 bytes——Float double——8 bytes——Double char——2 bytes——Character boolean——————Boolean boolean数据类型非true即false。这个数据类型表示1 bit，但是它的大小并没有精确定义。《Java虚拟机规范》中如是说：“虽然定义了boolean这种数据类型，但是只对它提供了非常有限的支持。在Java虚拟机中没有任何供boolean值专用的字节码指令，Java语言表达式所操作的boolean值，在编译之后都使用Java虚拟机中的int数据类型来代替，而boolean数组将会被编码成Java虚拟机的byte数组，每个元素boolean元素占8位”。这样我们可以得出boolean类型单独使用是4个字节，在数组中又是1个字节。那虚拟机为什么要用int来代替bo...

2018-08-28

565

Python全栈项目（HTTPServer、PiP使用）

pip是Python官方推荐的包管理工具属于python的一部分 pip的使用 pip的安装 sudo apt-get install python-pip sudo apt-get install python3-pip 安装包 pip3 install package 升级 pip3 install --upgrade package 查看python包清单 pip3 list 卸载 pip3 uninstall package 查找软件包 pip3 search package 显示软件包信息 pip3 show package

2018-08-28

569

发表评论

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。