Vue中class与style绑定
gitHub地址:https://github.com/manlili/vue_learn里面的lesson07
一 用对象的方法绑定class
很简单,举个栗子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class与style绑定</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
<div class="otherClass" :class="{'class1':name1,'class2':name2}">我是文字</div> <!--法一:用对象的方式实现-->
</div>
<script type="text/javascript">
var myVue = new Vue({
el:".test",
data: {
name1: true,
name2: false,
}
})
</script>
</body>
</html>
最后实现效果
关于使用对象绑定class,还可以用另外一种写法:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class与style绑定</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
<div class="test" :class="classObj">我是文字</div> <!--法一:用对象的方式实现-->
</div>
<script type="text/javascript">
var myVue = new Vue({
el:".test",
data: {
classObj: {
name1: false,
name2: true
}
}
})
</script>
</body>
</html>
最后的实现效果是:
二 用数组的方法绑定class
很简单,举个栗子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class与style绑定</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
<div class="otherClass" :class="[class1,class2]">我是文字</div> <!--法二:用数组的方式实现-->
</div> <script type="text/javascript">
var myVue = new Vue({
el:".test",
data: {
class1: 'name1',
class2: 'name2',
}
})
</script>
</body>
</html>
实现效果:
其实在数组中还可以用判断是否显示这个类名,举个例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class与style绑定</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
<div class="otherClass" :class="[class1,isShow? class2:'']">我是文字</div> <!--法二:用数组的方式实现-->
</div> <script type="text/javascript">
var myVue = new Vue({
el:".test",
data: {
class1: 'name1',
class2: 'name2',
isShow: false
}
})
</script>
</body>
</html>
实现效果是:
三 用数组和对象混合的方法绑定class
举个例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class与style绑定</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
<div class="otherClass" :class="[class1,{class2: isShow}]">我是文字</div> <!--法二:用数组的方式实现-->
</div> <script type="text/javascript">
var myVue = new Vue({
el:".test",
data: {
class1: 'name1',
class2: 'name2',
isShow: true
}
})
</script>
</body>
</html>
实现的效果:
四 用对象的方式实现style绑定
举个例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class与style绑定</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
<div class="otherClass" :style="{color: yanse,width: kuan + 'px' }">我是文字</div> <!--法一:用对象的方式实现-->
</div>
<script type="text/javascript">
var myVue = new Vue({
el:".test",
data: {
yanse: 'red',
kuan: 100,
}
})
</script>
</body>
</html>
实现效果如下:
其实也可以写为第二种方式:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class与style绑定</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
<div class="otherClass" :style="styleObj">我是文字</div> <!--法一:用对象的方式实现-->
</div>
<script type="text/javascript">
var myVue = new Vue({
el:".test",
data: {
styleObj: {
color: 'pink',
width: '200px',
}
}
})
</script>
</body>
</html>
实现结果是:
五 用数组的方式实现style绑定
没法单独用数组的实现style绑定,或者我没有测试出来方法,写在这里纯粹是因为我有强迫症,需要占个位置
六 用数组和对象混合的方式实现style绑定
举个例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class与style绑定</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
<div class="otherClass" :style="[styleObjectA,styleObjectB]">我是文字</div> <!--法一:用数组和对象的方式实现-->
</div>
<script type="text/javascript">
var myVue = new Vue({
el:".test",
data: {
styleObjectA: {
color: 'red',
width: '100px',
},
styleObjectB: {
top: '20px'
}
}
})
</script>
</body>
</html>
实现效果:
Vue中class与style绑定的更多相关文章
- vue中,class与style绑定
<template> <div> <p v-bind:class="{active:isActive,'demo':Demo}">嘿嘿</ ...
- 关于vue.js中class与style绑定的学习
练习代码: html: <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- vue中的数据双向绑定
学习的过程是漫长的,只有坚持不懈才能到达到自己的目标. 1.vue中数据的双向绑定采用的时候,数据劫持的模式.其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的get ...
- vue 的 Class 与 Style 绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错.因此,在将 ...
- vue基础——Class与Style绑定
Class与Style绑定 操作元素的class列表和内联样式是数据绑定的一个常见的需求. 因为它们都是属性,所以我们可以用v-bind来处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼 ...
- vue中v-model 数据双向绑定
表单输入绑定 v-model 数据双向绑定,只能应用在input /textare /select <div id="app"> <input type=&quo ...
- 前端框架之Vue(4)-Class与Style绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错.因此,在将 ...
- vue基础---Class 与 Style 绑定
[一]绑定HTML Class (1)对象语法 ①普通绑定class <div id="area" v-bind:class="className"> ...
- vue中html模板使用绑定的全局函数
我们知道在script中使用vue绑定的全局函数时, 我们需要用这种方式使用: this.Util.Fun(e) 那在模板中, 比如v-if中想使用Fun函数怎么办呢?你应该这样做 <i v-i ...
随机推荐
- 【Xamarin报错】visual studio android 模拟器部署卡住
模拟器启动成功,但是部署一直等待中,没有反应. 1>Starting deploy 5" KitKat (4.4) XXHDPI Phone ...1>Starting emul ...
- C#参考：Linq 概述
Linq (Language Integrated Query,语言集成查询),是微软公司提供的一项新技术,它能够将查询功能引入到.NET 3.5 所支持的编程语言中,例如C#,Visual Basi ...
- memcpy 和直接赋值的性能差异
不废话,看代码: #include <time.h> #include <stdint.h> #include <iostream> #define ARR_LEN ...
- AjaxUploader使用
一.简单上传(Simple Upload with Progress) <CuteWebUI:Uploader ID="ajaxUploader" runat="s ...
- winform用户控件
用途用户控件包含Time控件和一个lable控件,一个ToolStrip控件,每隔一秒显示一次时间 1. 生成用户控件 新建一个项目类型为用户控件 注意定义类名,此类名为以后工具箱中显 ...
- C# 退出程序方法
1.this.Close(); 只是关闭当前窗口,若不是主窗体的话,是无法退出程序的,另外若有托管线程(非主线程),也无法干净地退出: 2.Application.Exit(); 强制所有消息中 ...
- MyBatis知多少（6）表现层与业务逻辑层
表现层 表现层负责向最终用户展示应用程序的控制方式以及数据.它还要负责所有信息的布局和格式.今天,商业应用程序最流行的表现方式应该算是Web前端了,它使用HTML和JavaScript并通 过Web浏 ...
- Java知多少（105）套接字(Socket)
网络应用模式主要有: 主机/终端模式:集中计算,集中管理: 客户机/服务器(Client/Server,简称C/S)模式:分布计算,分布管理: 浏览器/服务器模式:利用Internet跨平台. www ...
- C#生成不重复的随机数(转)
我们在做能自动生成试卷的考试系统时,常常需要随机生成一组不重复随机数的题目,在.net Framework中提供了一个专门用来产生随机数的类System.Random. 对于随机数,大家都知道,计算机 ...
- 15个带给您优秀用户体验的移动应用 UI 设计
在今天在移动 App 界面设计中,你可以看到不同创意类型的视觉效果.特别是在 Dribbble 上面,有有很多移动应用程序的 UI 概念设计,让你惊叹.如果你想获得灵感,那很有必要看看下面15个优秀用 ...