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的使用的更多相关文章

  1. v - bind

    1. 用于处理html标签的动态属性,即动态赋值(动态地绑定一个或多个特性,或一个组件 prop 到表达式) 2. 官网API <!DOCTYPE html> <html lang= ...

  2. v:bind指令对于传boolean值的注意之处

    1,

  3. vue组件详解(二)——使用props传递数据

    在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的.  一.基本用法 组件不仅仅 ...

  4. vue组件详解——使用props传递数据

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 ...

  5. vue第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 )

    第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...

  6. 简单的springboot + vue

    安装vue 脚手架 npm install -g @vue/cli 查看vue 版本 vue -V 创建vue项目 vue create vue_project Vue CLI v4.5.13? Pl ...

  7. 第六十五篇:Vue的过滤器

    好家伙, 过滤器,vue3取消了,只有vue2能用 1.过滤器 过滤器(Filters)是vue为开发者提供的功能,常用于文本的格式化. 过滤器可以用在两个地方:插值表达式和v-bind属性绑定. 过 ...

  8. vue.js在windows本地下搭建环境和创建项目

    Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vu ...

  9. 更新补丁Bind

    1.查询补丁版本信息 (1) rpm -qa|grep bind (2) dig @localhost version.bind 2.下载安装 BIND最新漏洞和升级解决办法 现在有非常多的公司的都有 ...

  10. Bind开启IPv6功能

    [root@localhost sbin]# ./named -v bind 9.5.1-p3-v3.0.9 1,服务器开启IPv6服务 网卡配置v6地址 [root@localhost ~]# if ...

随机推荐

  1. Dictionaries

    A dictionary is like a list, but more general. In a list, the indices have to be integers; in a dict ...

  2. 如何设置eclipse代码自动提示功能

    如何设置eclipse代码自动提示功能 我们在刚安装完使用eclipse进行开发时,会发现没有代码提示会非常的不方便,下面小编将告诉你如何进行代码自动提示的设置. 工具/原料   eclipse 电脑 ...

  3. Spring MVC 核心架构图

    架构图对应的DispatcherServlet核心代码如下: //前端控制器分派方法 protected void doDispatch(HttpServletRequest request, Htt ...

  4. ELK到底是什么?那么多公司用!__转载

    Sina.饿了么.携程.华为.美团.freewheel.畅捷通 .新浪微博.大讲台.魅族.IBM...... 这些公司都在使用ELK!ELK!ELK! ELK竟然重复了三遍,是个什么?   一.ELK ...

  5. nginx设置可以默认访问index.php

    vim /usr/local/nginx/conf/nginx.conf:      在 location /{                index index.php index.html i ...

  6. MySQL 大数据量文本插入

    导入几万条数据需要等好几分钟的朋友来围观一下! 百万条数据插入,只在一瞬间.呵呵夸张,夸张!! 不到半分钟是真的! 插入指令: load data infile 'c:/wamp/tmp/Data_O ...

  7. 用Google Chrome 浏览器打开Unity打包的WebGL

    方法一: 直接build and run 方法二: 步骤: 1.打开浏览器的属性 2.在目标的位置添加--allow-file-access-from-files, 注意--allow-file-ac ...

  8. HDFS 断点续传,写文件功能

    实际上这是个 HDFS 的工具类部分代码. 首先 public static Configuration configuration = null;public static FileSystem f ...

  9. Qt之图形(转换)

    简述 QTransform类指定坐标系的2D转换,可以指定平移.缩放.扭曲(剪切).旋转或投影坐标系.绘制图形时,通常会使用. QTransform与QMatrix的不同之处在于,它是一个真正的3x3 ...

  10. leetcode笔记:Range Sum Query - Mutable

    一. 题目描写叙述 Given an integer array nums, find the sum of the elements between indices i and j (i ≤ j), ...