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.面向过程编程 面向过程:一种编程思想在编写代码时 要时刻想着过程这个两个字过程指的是什么? 解决问题的步骤 流程,即第一步干什么 第二步干什么,其目的是将一个复杂的问题,拆分为若干的小的问题,按照 ...
随机推荐
- PAT B1025 反转链表 （25 分）
给定一个常数 K 以及一个单链表 L,请编写程序将 L 中每 K 个结点反转.例如:给定 L 为 1→2→3→4→5→6,K 为 3,则输出应该为 3→2→1→6→5→4:如果 K 为 4,则输出应该 ...
- P2216 [HAOI2007]理想的正方形
题目描述 有一个a*b的整数组成的矩阵,现请你从中找出一个n*n的正方形区域,使得该区域所有数中的最大值和最小值的差最小. 输入输出格式 输入格式: 第一行为3个整数,分别表示a,b,n的值 第二行至 ...
- 计算机视觉-sift(1)原理
1999年由David Lowe首先发表于计算机视觉国际会议(International Conference on Computer Vision,ICCV),2004年再次经David Lowe整 ...
- 将EF项目从dbfirst转化为codefirst
一个脚本服务的项目,之前是先设计的数据库表,采用EF的dbfirst做的映射.项目完成后,出现迁移瓶颈. 1.dbfirst项目,如果数据库表结构做了调整,需要重新映射 2.当出现表结构一致,但数据库 ...
- 关于C#中async/await中的异常处理（上）-（转载）
在同步编程中,一旦出现错误就会抛出异常,我们可以使用try…catch来捕捉异常,而未被捕获的异常则会不断向上传递,形成一个简单而统一的错误处理机制.不过对于异步编程来说,异常处理一直是件麻烦的事情, ...
- Hadoop集群nodes unhealthy解决方法
在搭建好Hadoop集群之后,所有服务均可正常启动,但是在运行MapReduce程序的时候,发现任务卡在7/09/07 22:28:14 INFO mapreduce.Job: Running job ...
- 20155238 实验四 Android程序设计
Android 安装Android Studio 按照教程依次完成安装步骤.安装所存的相应文件夹必须纯英文,不能出现特殊字符. 32位系统和64位系统是同一个安装文件.启动程序中32位与64位都有.根 ...
- 20155305《网络对抗》MSF基础应用
20155305<网络对抗>MSF基础应用 实验过程 实验系统 靶机1:Windows XP Professional SP2 ,IP地址:192.168.1.108 靶机2:Window ...
- 20155333 《网络对抗》 Exp6 信息搜集与漏洞扫描
20155333 <网络对抗> Exp6 信息搜集与漏洞扫描 基础问题 哪些组织负责DNS,IP的管理? 全球根服务器均由美国政府授权的ICANN统一管理,负责全球的域名根服务器.DNS和 ...
- 20155334 《网络攻防》Exp4 恶意代码分析
<网络攻防>Exp4 恶意代码分析 一.实验问题回答 如果在工作中怀疑一台主机上有恶意代码,但只是猜想,所有想监控下系统一天天的到底在干些什么.请设计下你想监控的操作有哪些,用什么方法来监 ...