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]基 ...
随机推荐
- js 匿名函数 用法
JS执行顺序为从上到下 先声明存储匿名函数的变量放在JS文件中 <script src="/Scripts/niming.js" type="text/javasc ...
- Ubuntu下配置PHP和CakePHP记录
目前在完成一个PayPal的支付页面,需要有PHP的开发环境,同时,在开发时使用了CakePHP的框架,于是就有了下面的情景. 操作环境: OS:ubuntu-14.04.2-desktop-amd6 ...
- (区间dp 或 记忆化搜素 )Brackets -- POJ -- 2955
http://poj.org/problem?id=2955 Description We give the following inductive definition of a “regular ...
- Alpha阶段敏捷冲刺（三）
1.提供当天站立式会议照片一张. 2.每个人的工作 (有work item 的ID),并将其记录在码云项目管理中: 昨天已完成的工作. 吴玲:一边学习,一边参考别人的代码. 王兴:完成了数据库的初步搭 ...
- android textview支持多种格式跳转
http://www.linuxidc.com/Linux/2011-08/40530p2.htm 1.android:autoLink属性,使TextView中链接手机号码/网页/邮件/地图 and ...
- 微软新一代Surface发布，参数曝光
在沉寂许久之后,Surface 2及Surface Pro 2又有猛料爆出,这一次不单单是新品展示,伴随的还有更多的详细的参数和全新配件. 从外观来看,新一代的Surface外形上沿袭了上一代,但颜色 ...
- hdu 5051 找规律？+大trick
http://acm.hdu.edu.cn/showproblem.php?pid=5051 打表找规律 据说是http://zh.wikipedia.org/wiki/%E6%9C%AC%E7%A6 ...
- [php-cookie] cookie 请求跨域，如何共享
cookie 请求跨域的问题, 假设我有两个域名,一个 m.example.com,另一个是 www.example.com . 那么我需要如何设置 cookie 才可以在这两个域名都实现共享呢? / ...
- Nginx 实现端口转发
https://www.cnblogs.com/zhaoyingjie/p/7248678.html Nginx 实现端口转发 什么是端口转发 当我们在服务器上搭建一个图书以及一个电影的应用,其中图书 ...
- ReportMachine常见问题
ReportMachine常见问题 2012-06-22 12:26:50| 分类: Delphi|举报|字号 订阅 下载LOFTER我的照片书 | 1.不打印特定的MemoVie ...