Vue入门---属性、style和class绑定方法
一 、用对象的方法绑定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="../../node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
.class1{
color: #f00;
}
.class2{
background-color: #00f;
}
</style>
</head>
<body>
<div class="test">
<div class="otherClass" :class="{'class1':name1,'class2':name2}">我是娃哈哈</div> <!--方法一:用对象的方式实现 name1和name2是boolean型,为true时给元素加上对应的class，为false不添加-->
</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="../../node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
.class1{
color: #f00;
}
.class2{
background-color: #00f;
}
</style>
</head>
<body>
<div class="test">
<div class="otherClass" :class="classObj">我是娃哈哈</div> <!--方法一:用对象的方式实现 ,true给元素加上对应的class，为false不添加-->
</div>
<script type="text/javascript">
var myVue = new Vue({
el:".test",
data: {
classObj: {
class1: true,
class2: 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="../../node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
.class1{
color: #f00;
}
.class2{
background-color: #ff0;
}
</style>
</head>
<body>
<div class="test">
<div class="otherClass" :class="[name1,name2]">我是娃哈哈</div> <!--方法二:用数组的方式实现 -->
</div>
<script type="text/javascript">
var myVue = new Vue({
el:".test",
data: {
name1: 'class1',
name2: 'class2', }
})
</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="../../node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
.class1{
color: #f00;
}
.class2{
background-color: #ff0;
}
</style>
</head>
<body>
<div class="test">
<div class="otherClass" :class="[name1, isShow? name2 : '']">我是娃哈哈</div> <!--方法一:用数组的方式实现 ，采用三元表达式,条件为true时显示-->
</div>
<script type="text/javascript">
var myVue = new Vue({
el:".test",
data: {
name1: 'class1',
name2: 'class2',
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="../../node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
.class1{
color: #f00;
}
.class2{
background-color: #ff0;
}
</style>
</head>
<body>
<div class="test">
<div class="otherClass" :class="[name1, {class2 :isShow}]">我是娃哈哈</div> <!--方法三:用数组对象组合的方式实现，条件为true时显示-->
</div>
<script type="text/javascript">
var myVue = new Vue({
el:".test",
data: {
name1: 'class1',
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="../../node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
.class1{
color: #f00;
}
.class2{
background-color: #ff0;
}
</style>
</head>
<body>
<div class="test">
<div class="otherClass" :style="{color: color, width: width + 'px'}">我是娃哈哈</div> <!--方法三:用对象的方式实现-->
</div>
<script type="text/javascript">
var myVue = new Vue({
el:".test",
data: {
color: 'red',
width: 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="../../node_modules/vue/dist/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: 'red',
width: '200px',
} }
})
</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="../../node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
<div class="otherClass" :style= "[styleObj1,styleObj2]">我是娃哈哈</div> <!--方法三:用对象的方式实现-->
</div>
<script type="text/javascript">
var myVue = new Vue({
el:".test",
data: {
styleObj1: {
color: 'red',
width: '200px',
},
styleObj2: {
backgroundColor: '#ff0'
} }
})
</script>
</body>
</html>
实现效果：
六、绑定属性
v-bind:src=""
width/height/title....
简写：:src="" 推荐
<img src="{{url}}" alt=""> 效果能出来，但是会报一个404错误
<img v-bind:src="url" alt=""> 效果可以出来，不会发404请求 推荐使用
以上就是vue中绑定style和class还有属性的方法，希望对大家有帮助！
Vue入门---属性、style和class绑定方法的更多相关文章
- VUE 入门笔记
前端的MVVM概念今年来也算是如火如荼,了解完 MVVM的概念,也该找个去尝试下 首先我先试了下 国内小而美的 VUE 试着照着文档敲出入门文件,内容都在注释里 <!doctype html&g ...
- python tips:类的绑定方法（bound）和非绑定方法（unbound）
类属性只有类及其实例能够访问,可以理解为一个独立的命名空间. Python中类属性的引用方式有两种: 1. 通过类的实例进行属性引用,称为绑定方法(bound method),可以理解为方法与实例绑定 ...
- 前端vue之属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制、v-model进阶
今日内容概要 属性指令 style和class 条件渲染 列表渲染 事件处理 数据的双向绑定 v-model进阶 购物车案例 内容详细 1.属性指令 <!DOCTYPE html> < ...
- Vue.js的类Class 与属性 Style如何绑定
Vue.js的类Class 与属性 Style如何绑定 一.总结 一句话总结:数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性,我们可以用 v-bind 处理它们:我 ...
- Vue.js之Vue计算属性、侦听器、样式绑定
前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...
- vue入门(二)----模板与计算属性
其实这部分内容我也是参考的官网:http://cn.vuejs.org/v2/guide/syntax.html,但是我还是想把自己不懂的知识记录一下,加深印象,也可以帮助自己以后查阅.所谓勤能补拙. ...
- vue class与style绑定、条件渲染、列表渲染
列表渲染 根据我例子的需要,先来说下,列表渲染使用到的是v-for指令,需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名,具体使用方法 ...
- 02 . Vue入门基础之条件渲染,列表渲染,事件处理器,表单控件绑定
vue基础 声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统 Example1 <!DOCTYPE html> <html> ...
- 1.面向过程编程 2.面向对象编程 3.类和对象 4.python 创建类和对象 如何使用对象 5.属性的查找顺序 6.初始化函数 7.绑定方法 与非绑定方法
1.面向过程编程 面向过程:一种编程思想在编写代码时 要时刻想着过程这个两个字过程指的是什么? 解决问题的步骤 流程,即第一步干什么 第二步干什么,其目的是将一个复杂的问题,拆分为若干的小的问题,按照 ...
随机推荐
- 关于Flume中Chanel.Selector.header解释
flume内置的ChannelSelector有两种,分别是Replicating和Multiplexing. Replicating类型的ChannelSelector会针对每一个Event,拷贝到 ...
- 04-Maven依赖管理
1.概述 2.依赖范围 3.依赖传递性 4.依赖的原则
- 使用XMing+putty运行linux图形界面程序
起因接下去的工作要作一些数值模拟,于是到师兄的工作站上开了个帐号.工作站运行的是RHEL4,要说远程SSH,就算是FTerm也足够胜任,不过,因为我要用的查看计算结果的软件需要使用图形界面,这一点就比 ...
- 2.2《想成为黑客，不知道这些命令行可不行》(Learn Enough Command Line to Be Dangerous)——列表
也许最常用的Unix命令是ls了,它是'list'的简写(Listing 8) Listing 8 用ls以列表的形式显示文件和目录(内容输出跟各自电脑有关) $ ls Desktop Downloa ...
- 从零开始学cookie（个人笔记）——一
未完待续 参考链接 : cookie (储存在用户本地终端上的数据) 关键词: cookie session HTTP 小文本文件 解释 Cookie 是由 Web 服务器保存在用户浏览器上的小文本文 ...
- Keras实现风格迁移
风格迁移 风格迁移算法经历多次定义和更新,现在应用在许多智能手机APP上. 风格迁移在保留目标图片内容的基础上,将图片风格引用在目标图片上. 风格本质上是指在各种空间尺度上图像中的纹理,颜色和视觉图案 ...
- JAVA 文件读取写入后 md5值不变的方法
假如我们想把某文件读入 StringBuffer 并写入新文件,新文件md5值需要保持不变(写入新文件后保证和源文件一模一样), 我们就需要在操作 StringBuffer 时附加换行符: Strin ...
- [SHOI2012]随机树[期望dp]
题意 初始 \(1\) 个节点,每次选定一个叶子节点并加入两个儿子直到叶子总数为 \(n\),问叶子节点深度和的平均值的期望以及最大叶子深度的期望. \(n\leq 100\) . 分析 对于第一问, ...
- 重新解读DDD领域驱动设计(一)
回顾 十年前,还未踏入某校时,便听闻某学长一毕业就入职北京某公司,月薪过万.对于一个名不见经传的小学院,一毕业能拿到这个薪水还是非常厉害的.听闻他学生期间参与开发了一款股票软件,股票那时正迎来一波疯涨 ...
- python3面向对象注意事项
一.面向对象super的作用: class parent(object): def __init__(self): self.test() def test(self): print('parent- ...