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 ...
随机推荐
- 互不侵犯_状压$dp$
如果有想学习状压\(dp\)的童鞋,请光临博客状压\(dp\)初学 互不侵犯 题目描述 在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上左下右上右下八 ...
- POJ 2478 线性递推欧拉函数
题意: 求sigma phi(n) 思路: 线性递推欧拉函数 (维护前缀和) //By SiriusRen #include <cstdio> using namespace std; # ...
- spring的quartz定时任务
一.版本: 1.spring:4.1.7: 2.quartz:2.2.1: 二.基于ssm项目: 1.引入jar包:quartz-2.2.1.jar:spring所需包. 2.说明:quartz ...
- ES6中常用的简写方式
1. var foo = 'bar'; var baz = {foo}; baz // {foo: "bar"} // 等同于 var baz = {foo: foo}; 2. f ...
- 51Nod 独木舟（贪心）
n个人,已知每个人体重.独木舟承重固定,每只独木舟最多坐两个人,可以坐一个人或者两个人.显然要求总重量不超过独木舟承重,假设每个人体重也不超过独木舟承重,问最少需要几只独木舟? Input 第一行包含 ...
- 今日SGU 5.30
SGU 190 题意:给你个n*n的矩形,然后上面有几个点不能放东西,然后问你能不能用1*2的矩形,把能放 东西的地方放满 收获:一开始想的是,dfs,然后感觉这样的话,代码很长,而且很容易超时, 看 ...
- Unity ContextMenu特性
有时候我们需要在编辑器下,频繁的做一些操作,比如说在不同的位置创建物体,一个个的修改坐标显然有点繁琐 这时候ContextMenu就派上用处了 例:利用 LineRenderer 画圆,我们不可能一个 ...
- 题解 P2610 【[ZJOI2012]旅游】
今天模拟赛考了这道题,那就来水一篇题解吧...(话说提高组模拟赛考什么省选题啊??) 这道题要我们求一条线段最多能经过的三角形数量. 回想小学学过的奥数,老师告诉过我们这样一件事:`点无大小 线无粗细 ...
- ECNUOJ 2574 Principles of Compiler
Principles of Compiler Time Limit:1000MS Memory Limit:65536KBTotal Submit:473 Accepted:106 Descripti ...
- ECNUOJ 2856 仰望星空
仰望星空 Time Limit:1000MS Memory Limit:65536KBTotal Submit:373 Accepted:145 Description 我仰望星空, 它是那样辽阔而 ...