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 ...
随机推荐
- [NOI2002] Robot 解题报告(数论+DP)
题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1408 Description 3030年,Macsy正在火星部署一批机器人. 第1秒,他 ...
- Lamp安装 php-v5.6【ZendGuardLoader】的问题
Lamp安装 php-v5.6[ZendGuardLoader]的问题 标签(空格分隔):php,linux Apache日志: 就这个问题导致无法解析运行php文件.下面是网上找的解决方案 Zend ...
- python ftp
#fpt_server.py#__*__ encoding=utf-8 __*__ import socket ,os class MyClass(object): def __init__(self ...
- <Three.js>（第一节）环境搭建
Three.js顾名思义3D的js库.是运行在浏览器的基于webgl的3D引擎.该引擎是github上的一个开源项目,下载地址:https://github.com/mrdoob/three.js/ ...
- linux下搭建NFS服务器
服务端:10.6.191.183 客户端:10.6.191.182 NFS 是Network File System的缩写,即网络文件系统.一种使用于分散式文件系统的协定,由Sun公司开发,于1984 ...
- Test-我喜欢LInux
测试发帖流程 哈哈 习惯一下先.
- Java 异常的捕获与处理详解（二）
(一).throws关键字 throws关键字主要是在定义上使用的,表示的是此方法中不进行异常处理,而交给被调用处处理. 例如: class MyMath { public int div(int x ...
- 一 Balancer regionCountCost 权重。
原文如下地址 : http://www.cnblogs.com/cenyuhai/p/3650943.html 看源码很久了,终于开始动手写博客了,为什么是先写负载均衡呢,因为一个室友入职新公司了,然 ...
- Intel Media SDK 性能測试
经过測试,发如今windows 7上 i3 i5 上Intel Media SDK 1080P仅仅能解6路,720P仅仅能解8路, 不知大家有没有測试过?
- HDU 5371 Hotaru's problem Manacher+尺取法
题意:给你一个序列,求最长的两段回文子串,要求他们共用中间的一半. 思路:利用Manacher求出p[i]表示的当前位置的最长回文串长度,然后把每一个长度大于等于2的回文串的左区间和右区间分别放到两个 ...