vue教程1-06 属性、class和style

一、属性

属性:
v-bind:src=""
width/height/title.... 简写:
:src="" 推荐 <img src="{{url}}" alt=""> 效果能出来,但是会报一个404错误
<img v-bind:src="url" alt=""> 效果可以出来,不会发404请求
window.onload=function(){
new Vue({
el:'#box',
data:{
url:'https://www.baidu.com/img/bd_logo1.png',
w:'200px',
t:'这是一张美丽的图片'
},
methods:{
}
});
}; <div id="box">
<!--<img src="{{url}}" alt="">-->
<img :src="url" alt="" :width="w" :title="t">
</div>

二、class和style

:class=""     v-bind:class=""
:style=""     v-bind:style=""

:class="[red]"     red是数据
:class="[red,b,c,d]"

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
claOne:'red',//这里的red是样式class类名
claTwo:'blue'
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<!--这里的calOne,calTwo指data里的数据-->
<strong :class="[claOne,claTwo]">文字...</strong>
</div>
</body>
</html>

:class="{red:true, blue:false}"//这里是{ json}

<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
},
methods:{
}
});
};
</script>
<div id="box">
<strong :class="{red:true,blue:true}">文字...</strong>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
a:true,
b:false
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :class="{red:a,blue:b}">文字...</strong>
</div>
</body>
</html>

data:{

json:{red:a, blue:false}

}

:class="json"

//官方推荐用法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
json:{
red:true,
blue:true
}
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :class="json">文字...</strong>
</div>
</body>
</html>


--------------------------
style:
:style="[c]"

.red{
color: red;
}
<div id="box">
<strong :style="{color:'red'}">文字...</strong>
</div>


:style="[c,d]"
注意: 复合样式,采用驼峰命名法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style></style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
c:{color:'red'},//这里的red是 class .red
b:{backgroundColor:'blue'}//注意: 复合样式,采用驼峰命名法
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :style="[c,b]">文字...</strong>
</div>
</body>
</html>

:style="json"

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style></style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
a:{
color:'red',
backgroundColor:'gray'
}
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :style="a">文字...</strong>
</div>
</body>
</html>

vue教程1-06 v-bind属性、class和style的更多相关文章

  1. vue教程2-03 vue计算属性的使用 computed

    vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...

  2. vue教程2-07 自定义指令

    vue教程2-07 自定义指令 自定义指令: 一.属性: Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 }); <div v-re ...

  3. vue教程2-08 自定义键盘信息、监听数据变化vm.$watch

    vue教程2-08 自定义键盘信息 @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCode ...

  4. vue教程2-07 微博评论功能

    vue教程2-07 微博评论功能 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  5. vue教程1-03 v-for循环

    vue教程1-03 v-for循环 v-for循环: v-for="name in arr" {{value}} {{$index}} v-for="name in js ...

  6. C#开发Unity游戏教程之游戏对象的属性变量

    C#开发Unity游戏教程之游戏对象的属性变量 Unity游戏对象的属性——变量 通过对上一章的学习,读者应该了解到了,游戏对象上的属性与脚本中的变量,建立联系的方式就是将脚本赋予游戏对象.上一章只是 ...

  7. Vue基本使用---对象提供的属性功能

    一 过滤器 过滤器就是vue允许开发者自定义的文本格式化函数, 可以使用在两个地方:输出内容和操作数据中. 1.1 定义过滤器的两种方式 1.1.1 使用Vue.filter()进行全局定义 Vue. ...

  8. vue教程二 vue组件(3)

    给属性传递数据 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  9. 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法

    Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...

随机推荐

  1. DOM3级的变化

    由于存在跨浏览器开发问题所以不推荐使用: 兼容性: event.key 包含所按下键的字符 event.char 属性IE9和safari和chrome并不支持 event.location 返回所按 ...

  2. CPU load高而使用率低的问题分析

    最近服务器上出现了一个很诡异的问题,症状如下图所示: 查看进程发现: 如上图所示,非常多的df -h进程没有退出.于是手工kill掉这些 df -h进程.cpu load恢复正常. 至于为什么会有这么 ...

  3. AngularJS的select设置默认值

    AngularJS的select设置默认值 在使用Angular时候使用select标签时会遇到绑定数据指定默认显示值可这样实现 <!DOCTYPE html> <html ng-a ...

  4. HDU 2546 01背包

    http://acm.hdu.edu.cn/showproblem.php?pid=2546 经典的01背包 预留5元买最贵的,剩余的就是01背包. #include<stdio.h> # ...

  5. C++插件架构浅谈与初步实现

    一.插件架构初步介绍 想到写本博客,也没想到更好的名字,目前就先命这个名吧.说到插件架构,或许大部分IT从业者都听过或者某些牛人也自己实现过稳定高效的插件框架.目前有很多软件以及库都是基于插件架构,例 ...

  6. SpringMVC随笔之——@responsebody【引用snowolf博文】

    首先说RESTful 风格是什么 :(RESTful 风格:把请求参数变成请求路径的一种风格.) OK,一句话总结完毕 @responsebody表示该方法的返回结果直接写入HTTP response ...

  7. 状态 ajax

    //html部分 <a href="#" data-status="{$vo.state}" data-urid="{$vo.id}" ...

  8. poj2094

    很不错的一道题,很让我见识到了差分序列的运用的神奇之处..一下是从北邮BBS看到的题解,写得很清楚..这边就直接转过来. uRLhttp://bbs.byr.cn/#!article/ACM_ICPC ...

  9. RxSwift学习笔记3:生命周期/订阅

    有了 Observable,我们还要使用 subscribe() 方法来订阅它,接收它发出的 Event. let observal = Observable.of("a",&qu ...

  10. 分形之树(Tree)

    似乎每一个有关分形的教程都要讲到分形树,大概是因为树是生活中最常见的分形实物吧.这一节将展示下如何一步一步地生长出一棵树来.其实现算法不难,就是在每一次生长迭代中,使线段生长出几条新的线段来. 核心代 ...