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.面向过程编程 面向过程:一种编程思想在编写代码时 要时刻想着过程这个两个字过程指的是什么? 解决问题的步骤 流程,即第一步干什么 第二步干什么,其目的是将一个复杂的问题,拆分为若干的小的问题,按照 ...
随机推荐
- hadoop集群部署配置补充
/etc/hosts192.168.153.147 Hadoop-host192.168.153.146 Hadoopnode1 192.168.153.145 Hadoopnode2::1 loca ...
- day29
今日内容: 异常处理 元类介绍 元类(通过元类中的__init__方法,改变实例化获得的类) 元类(通过元类中的__call__方法,改变实例化获得的类实例化出来的对象) 1.异常处理: 什么是异常处 ...
- 牛掰本机限速软件appband
带宽调度器AppBand可以为Windows应用程序分配网络带宽并指定数据收发的优先级,用软件的方式实现桌面应用的简单QOS调度.(1) P2P方式的下载软件(BT/eMule/迅雷等)或者在线播放占 ...
- Eclipse-安装Spring Tool Suit 插件
登录http://spring.io/tools/sts/all 下载所需的Spring Tool Suit安装包 我用的是springsource-tool-suite-3.6.1.RELEASE- ...
- Codeforces round 1100
Div 2 532 我对交互一无所知 只能寄期望与NOI和省选不出交互吧... E 这个题,真的是耻辱... 其实非常简单,就是二分+判环... 那么就直接二分答案+拓扑排序即可... (我居然在考试 ...
- vs如何将工程配置，保存到属性表
上次讲到新建一个opencv工程的配置过程,整个流程下来还是非常麻烦的.每次新建一个工程都要走这个流程的话就要疯了! 现在介绍一种将工程配置,保存到属性表的方法,那么下次新建工程时,只要添加这个属性表 ...
- 在sourceinsight中添加快速注释 Ctrl+/
1.搜索文件:utils.em(C:\Program Files (x86)\Source Insight 3)2.用sourceinsight打开文件:utils.em3.在文件末尾添加下面代码 m ...
- 详解C#7.0新特性
1. out 变量(out variables) 以前我们使用out变量必须在使用前进行声明,C# 7.0 给我们提供了一种更简洁的语法 “使用时进行内联声明” .如下所示: 1 var input ...
- java实现基于关键字的文件夹(文件）的搜索、文件夹（文件）的复制、删除
最近在做一个项目,需要实现这几项功能,上网查了很多资料,自己研究了好几天终于实现了,现在与大家分享一下. 一.JAVA实现文件夹的搜索 在百度搜索N个技术文章,从哪些大牛们共享的资料中终于写出了我 ...
- jmeter-如何在JDBC Request中添加多条语句执行
1.JDBC Connection Configuration中配置Database URL时在URL后面添加 ?allowMultiQueries=true 2.JDBC Request中添加语句 ...