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

一 、用对象的方法绑定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}}" > 效果能出来,但是会报一个404错误
<img v-bind:src="url" > 效果可以出来,不会发404请求   推荐使用

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

原文地址:https://www.cnblogs.com/le220/p/9536618.html

时间: 2024-11-08 21:35:15

Vue入门---属性、style和class绑定方法的相关文章

vue+elementui dropdown 下拉菜单绑定方法

方法一:给el-dropdown根组件监听command ,再el-dropdown-item 绑定commandshuxing值. methods内详细写监听对应的方法 handleCommand(command) { if(command == 'loginOut'){ this.$confirm('are you sure loginOut?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'

python tips:类的绑定方法(bound)和非绑定方法(unbound)

类属性只有类及其实例能够访问,可以理解为一个独立的命名空间. Python中类属性的引用方式有两种: 1. 通过类的实例进行属性引用,称为绑定方法(bound method),可以理解为方法与实例绑定在一起. 2. 通过类进行属性引用,称为非绑定方法(unbound method),方法没有与实例绑定. 在绑定方法中,为了与实例绑定,Python自动将实例作为方法的第一个参数,而非绑定方法则表现的像普通函数,和普通函数的区别在于它只能通过类来访问. 两种引用方式: 1 class A: 2 de

vue入门(二)----模板与计算属性

其实这部分内容我也是参考的官网:http://cn.vuejs.org/v2/guide/syntax.html,但是我还是想把自己不懂的知识记录一下,加深印象,也可以帮助自己以后查阅.所谓勤能补拙. 首先我们说一下模板,其实如果看过第一节vue入门----组件,我们会知道更好更科学的办法是通过创建组件的方式,这种方式允许我们任意进行组件的嵌套.而通过模板的方式的话,个人觉得效果并没有组件好.行,开始切入正题,现在我们首先通过一下几点来进行学习(其实是按照官网的顺序记录自己不懂的知识点). 1.

面向对象二次整理(基础,属性引用,方法引用.绑定方法)

概念之类的去百度一下... 基础 类 属性 实例变量 类变量(默认共享) 私有属性(__var) 方法 构造方法 析构方法或析构函数 私有方法 对象: 实例化一个类之后得到的对象 封装 把一些功能的实现细节不对外暴露 类的初始化(__init__): 就是给对象定义一些自己的特征,不能有返回值 继承 代码的重用 单继承 多继承 2.7的经典类-->深度优先,新式类-->广度优先 3.x 均是广度优先 class Foo() 多态 接口重用,一种接口,多种实现 高级属性: 静态方法 与类无关,不

基于继承类的属性模版中无法绑定的原因和解决方法

这个的晚上想学学WPF 做一个类似于ERP 左边菜单.构思一下思路 ...... 创建一个类基于Expander类. 1 public class ExpanderBox : Expander 2 { 3 #region 定义依赖属性 4 5 6 //定义ItemsSource数据源 7 public static readonly DependencyProperty ItemsSourcesProperty = DependencyProperty.Register("ItemsSource

Python的实例定属性和方法或类绑定方法

一.给实例对象绑定属性和方法:1.给实例绑定属性:先定义一个Student类 #!/usr/bin/python class Student(object): pass 然后绑定属性: s = Student() s.name = 'AAA' # 动态给实例绑定一个属性 print(s.name)#输出AAA 2.给实例绑定方法:先定义一个方法 def add(self,a,b): self.a = a self.b = b return self.a +self.b 然后绑定方法: Metho

属性查找与绑定方法

属性查找 类有两种属性:数据属性和函数属性 1.类的数据属性是所有对象共享的 class LuffyStudent: school='luffycity' def learn(self): print('is learning') def eat(self): print('is sleeping') #后产生对象 stu1=LuffyStudent() stu2=LuffyStudent() stu3=LuffyStudent() print(id(stu1.school)) print(id

python:属性查找与绑定方法

属性查找 类有两种属性:数据属性和函数属性 1.类的数据属性是所有对象共享的 # 类的数据属性是所有对象共享的,id是一样的 print(id(OldboyStudent.school)) # 4830576 print(id(s1.school)) # 4830576 print(id(s2.school)) # 4830576 print(id(s3.school)) # 4830576 2. 类的函数属性是绑定给对象用的,称为绑定到对象的方法 # 类的函数属性是绑定给对象使用的,obj.m

类属性查找与绑定方法

class luffystudent: def __init__(self,name,sex,age): self.name=name self.sex=sex self.age=age school='luffycity' def learn(self,x): print('%s is learning %s' %(self.name,x)) def eat(self): print('is eating') def sleep(self): print('is sleeping') #后产生