vue教程1-06 v-bind属性、class和style
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的更多相关文章
- vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...
- vue教程2-07 自定义指令
vue教程2-07 自定义指令 自定义指令: 一.属性: Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 }); <div v-re ...
- vue教程2-08 自定义键盘信息、监听数据变化vm.$watch
vue教程2-08 自定义键盘信息 @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCode ...
- vue教程2-07 微博评论功能
vue教程2-07 微博评论功能 <!doctype html> <html> <head> <meta charset="utf-8"& ...
- vue教程1-03 v-for循环
vue教程1-03 v-for循环 v-for循环: v-for="name in arr" {{value}} {{$index}} v-for="name in js ...
- C#开发Unity游戏教程之游戏对象的属性变量
C#开发Unity游戏教程之游戏对象的属性变量 Unity游戏对象的属性——变量 通过对上一章的学习,读者应该了解到了,游戏对象上的属性与脚本中的变量,建立联系的方式就是将脚本赋予游戏对象.上一章只是 ...
- Vue基本使用---对象提供的属性功能
一 过滤器 过滤器就是vue允许开发者自定义的文本格式化函数, 可以使用在两个地方:输出内容和操作数据中. 1.1 定义过滤器的两种方式 1.1.1 使用Vue.filter()进行全局定义 Vue. ...
- vue教程二 vue组件(3)
给属性传递数据 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
- 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...
随机推荐
- DOM3级的变化
由于存在跨浏览器开发问题所以不推荐使用: 兼容性: event.key 包含所按下键的字符 event.char 属性IE9和safari和chrome并不支持 event.location 返回所按 ...
- CPU load高而使用率低的问题分析
最近服务器上出现了一个很诡异的问题,症状如下图所示: 查看进程发现: 如上图所示,非常多的df -h进程没有退出.于是手工kill掉这些 df -h进程.cpu load恢复正常. 至于为什么会有这么 ...
- AngularJS的select设置默认值
AngularJS的select设置默认值 在使用Angular时候使用select标签时会遇到绑定数据指定默认显示值可这样实现 <!DOCTYPE html> <html ng-a ...
- HDU 2546 01背包
http://acm.hdu.edu.cn/showproblem.php?pid=2546 经典的01背包 预留5元买最贵的,剩余的就是01背包. #include<stdio.h> # ...
- C++插件架构浅谈与初步实现
一.插件架构初步介绍 想到写本博客,也没想到更好的名字,目前就先命这个名吧.说到插件架构,或许大部分IT从业者都听过或者某些牛人也自己实现过稳定高效的插件框架.目前有很多软件以及库都是基于插件架构,例 ...
- SpringMVC随笔之——@responsebody【引用snowolf博文】
首先说RESTful 风格是什么 :(RESTful 风格:把请求参数变成请求路径的一种风格.) OK,一句话总结完毕 @responsebody表示该方法的返回结果直接写入HTTP response ...
- 状态 ajax
//html部分 <a href="#" data-status="{$vo.state}" data-urid="{$vo.id}" ...
- poj2094
很不错的一道题,很让我见识到了差分序列的运用的神奇之处..一下是从北邮BBS看到的题解,写得很清楚..这边就直接转过来. uRLhttp://bbs.byr.cn/#!article/ACM_ICPC ...
- RxSwift学习笔记3：生命周期/订阅
有了 Observable,我们还要使用 subscribe() 方法来订阅它,接收它发出的 Event. let observal = Observable.of("a",&qu ...
- 分形之树（Tree）
似乎每一个有关分形的教程都要讲到分形树,大概是因为树是生活中最常见的分形实物吧.这一节将展示下如何一步一步地生长出一棵树来.其实现算法不难,就是在每一次生长迭代中,使线段生长出几条新的线段来. 核心代 ...