Vue v-bind的使用
1.src
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/Vue.js" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function () {
var vm = new Vue({
el: '#box',
data: {
url:'../img/1.png',
w100:'100px',
title:"这是图片"
}
});
}
</script>
</head>
<body>
<div id="box">
<img v-bind:src="url" v-bind:width="w100" v-bind:title="title">
<img :src="url" :width="w100" :title="title">
</div>
</body>
</html>
2.class []
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.font-red {
color: red;
}
.bgcolor-burlywood {
background: burlywood;
}
</style>
<script src="../js/Vue.js" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function() {
var vm = new Vue({
el: '#box',
data: {
red: 'font-red',
burlywood: 'bgcolor-burlywood'
}
});
}
</script>
</head>
<body>
<div id="box">
<p :class="[red,burlywood]">文字颜色</p>
</div>
</body>
</html>
这里数组中的数据是data中的变量。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.fontRed{
color: red;
}
.bgBurlywood{
background: burlywood;
}
</style>
<script src="../js/Vue.js" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function () {
var vm = new Vue({
el: '#box',
data: {
}
});
}
</script>
</head>
<body>
<div id="box">
<p :class="{fontRed:true,bgBurlywood:true}">文字颜色</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.fontRed{
color: red;
}
.bgBurlywood{
background: burlywood;
}
</style>
<script src="../js/Vue.js" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function () {
var vm = new Vue({
el: '#box',
data: {
r:true,
b:true
}
});
}
</script>
</head>
<body>
<div id="box">
<p :class="{fontRed:r,bgBurlywood:b}">文字颜色</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.fontRed{
color: red;
}
.bgBurlywood{
background: burlywood;
}
</style>
<script src="../js/Vue.js" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function () {
var vm = new Vue({
el: '#box',
data: {
json:{
fontRed:true,
bgBurlywood:false
}
}
});
}
</script>
</head>
<body>
<div id="box">
<p :class="json">文字颜色</p>
</div>
</body>
</html>
方法论：熟练使用其中的常用几种，就可以了！可以进行单元测试！
Vue v-bind的使用的更多相关文章
- v - bind
1. 用于处理html标签的动态属性,即动态赋值(动态地绑定一个或多个特性,或一个组件 prop 到表达式) 2. 官网API <!DOCTYPE html> <html lang= ...
- v:bind指令对于传boolean值的注意之处
1,
- vue组件详解（二）——使用props传递数据
在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的. 一.基本用法 组件不仅仅 ...
- vue组件详解——使用props传递数据
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 ...
- vue第八单元(组件通信 子父，父子组件通信 自定义事件 事件修饰符 v-model props验证 )
第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...
- 简单的springboot + vue
安装vue 脚手架 npm install -g @vue/cli 查看vue 版本 vue -V 创建vue项目 vue create vue_project Vue CLI v4.5.13? Pl ...
- 第六十五篇：Vue的过滤器
好家伙, 过滤器,vue3取消了,只有vue2能用 1.过滤器 过滤器(Filters)是vue为开发者提供的功能,常用于文本的格式化. 过滤器可以用在两个地方:插值表达式和v-bind属性绑定. 过 ...
- vue.js在windows本地下搭建环境和创建项目
Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vu ...
- 更新补丁Bind
1.查询补丁版本信息 (1) rpm -qa|grep bind (2) dig @localhost version.bind 2.下载安装 BIND最新漏洞和升级解决办法 现在有非常多的公司的都有 ...
- Bind开启IPv6功能
[root@localhost sbin]# ./named -v bind 9.5.1-p3-v3.0.9 1,服务器开启IPv6服务 网卡配置v6地址 [root@localhost ~]# if ...
随机推荐
- java动态导出PDF（利用itext）
项目基于ssm框架,使用itext动态导出pdf文件: 1.引入两个jar包:itextpdf-5.5.5.jar.itext-asian-5.2.0.jar 说明: 1.itextpdf-5.5.5 ...
- 数据仓库 SSIS
SSDT 下载 :https://msdn.microsoft.com/en-us/library/mt204009.aspx Codeplex 上的 AdventureWorks 示例数据库此链接将 ...
- Spring深入浅出（四）AOP面向切面
面向切面编程--AOP AOP(Aspect Oriented Programming),程序员称之为面向切面编程,是Spring框架除了IOC之外的另一个核心概念. AOP是对OOP(面向对象编程) ...
- PostgreSQL Replication之第八章 与pgbouncer一起工作（5）
8.5 维护 pgbouncer 除了我们在本章已经说明的,pgbouncer有一个很好的能够执行基本管理和监控任务的交互式管理界面. 它是如何工作的呢?pgbouncer提供给您一个虚假的称为pgb ...
- 位运算与bitset
&运算 将两个数转化为二进制后,对应的位置上相同即取,通常取1,所以&通常情况下可以用来枚举子集 设x为表示集合的整数,那么这个整数有如下性质: x的子集整数y在数值上不会比x大.因 ...
- caffe模型各层数据和参数可视化
先用caffe对cifar10进行训练,将训练的结果模型进行保存,得到一个caffemodel,然后从测试图片中选出一张进行测试,并进行可视化. In [1]: #加载必要的库 import nump ...
- GoldenGate 进程
GoldenGate进程 Manager进程 Manager进程是GoldenGate的控制进程,运行在源端和目标端上.它主要作用有以下几个方面:启动.监控.重启Goldengate的其他进程,报告错 ...
- 谈谈Vim中实用又好记的一些命令
本文的目的在于总结一些日常操作中比较实用.有规律的Vim命令,而不致于介绍一些基础的Vim知识,比如几种插入模式,hjkl移动命令,dd删除本行,p粘贴 等等,故对Vim基本知识不够熟悉的请参见其 ...
- core组件进阶
访问图像像素 存储方式 BGR连续存储有助于提升图像扫描速度. isContinuous()判断是否是连续存储. 颜色空间缩减 仅用这些颜色中具有代表性的很小的部分,就足以达到同样的效果. 将现有颜色 ...
- laravel中soapServer支持wsdl的例子
最近在对接客户的CRM系统,获取令牌时,要用DES方式加密解密,由于之前没有搞错这种加密方式,经过请教了"百度"和"谷歌"两个老师后,结合了多篇文档内容后,终于 ...