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]基 ...
随机推荐
- VC调试小结
本机调试F5: 开始调试Shift+F5: 停止调试F10: 调试到下一句,这里是单步跟踪 F11: 调试到下一句,跟进函数内部Shift+F11: 从当前函数中跳出F9: 设置(取消)断点Outpu ...
- SQL中的split方法的使用
参数说明: 1.@String :需要split的字符串 2.@Delimiter :格式化时分隔符 3.@index :返回split后数组的值 ), ),)) ) AS BEGIN )) ) DE ...
- s4-9 二层设备
二层(数据链路层)设备有哪些? 网卡 网桥 交换机 NIC 网卡 Nework Interface Card 为主机提供介质的访问. MAC地址烧在网卡的 ROM中 NIC 网 ...
- javaWeb的验证码编写
一.前言 验证码可以说在我们生活中已经非常普遍了,任何一个网站,任何一个App都会有这个功能,但是为啥要有这个呢?如何做才能做出来呢?下面小编会带领大家一起用java完成一个验证码的功能. 二.验证码 ...
- 使用jstl的Foreach 和jquery的each()的index属性
最近项目中用到隔行换色问题,使用到了jstl的foreach和jquery的each进行遍历. 首先jstl技术.除了常用的items,var外,还有一个下标属性varStatus,从0开始,使用起来 ...
- IDEA插件开发总结
一:前置步骤 1.添加开发插件所需的SDK: 1.1先添加JDK 1.2打开Project Structure-Platform Settings-SDKs 1.3添加IntelliJ Platfor ...
- php 安装扩展
安装mysqli扩展 1.到php文件ext下的mysqli cd /usr/local/php-7.1.5/ext/mysqli 2.在mysqli文件夹下执行 /usr/local/ph ...
- DDR中常用概念
一.DDR中的基本术语 (2)逻辑Bank SDRAM的内部是一个存储阵列,类似于一张表格.和表格的检索原理一样,先指定一个行(Row),再指定一个列(Column),就可以准确地找到所需要的单元格, ...
- 工作总结（一）：Linux C
这三个月以来一直忙着赶进度,没有停下来记录一些东西,很多很好的东西往往只能零零散散地记在草稿本上, 这样偶尔想起来自己都找不到,所以现在抽空总结下来. 这些天做了三件事,其一是在Linux下开发了对接 ...
- linux 查询搜索文件指令
一.which(寻找[执行档]) 二.whereis(由一些特定的目录中寻找文件文件名) 三.locate/updatedb 四.find 个人记录方便自用