vue4 属性 class style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
url:'https://www.baidu.com/img/bd_logo1.png',
w:'200px',
t:'这是一张美丽的图片'
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<!--<img src="{{url}}" alt=""> 这种方式会报404错 --> 属性是通过bind来绑定的
<img v-bind:src="url" alt="">
<img :src="url" alt="">
<img :src="url" alt="" :width="w" :title="t">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
red:'red', //是style的red
b:'blue'
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box"> //red是data里面的red,多个
<strong :class="[red,b]">文字...</strong>
<strong :class="red">文字...</strong> //单个data里面的red
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box"> //不是data里的red，是style的red,true表示生肖，
<strong :class="{red:true,blue:true}">文字...</strong>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<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">//不是data里的red，是style的red,true表示生肖，
<strong :class="{red:a,blue:b}">文字...</strong>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ },
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :style="{color:'red'}">文字...</strong>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
c:{color:'red'}
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :style="[c]">文字...</strong>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
c:{color:'red'},
b:{backgroundColor:'blue'}
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :style="[c,b]">文字...</strong>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
a:{
color:'red',
backgroundColor:'gray' //js里面的驼峰写法
}
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :style="a">文字...</strong>
</div>
</body>
</html>
vue4 属性 class style的更多相关文章
- td的cellIndex属性被style.display改变
IE7下面td的cellIndex属性,居然会随着style.display='none'的设置而改变,真是太恶心了
- Vue入门---属性、style和class绑定方法
一 .用对象的方法绑定class <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- CSS style 属性
CSS style 属性 定义和用法 必需的 type 属性规定样式表的 MIME 类型. type 属性指示 <style> 与 </style> 标签之间的内容. 值 &q ...
- js外部样式和style属性的添加移除
在页面中,往往一个控件的外部样式或者内部样式往往不只一个,而我们只需操作其中一个样式该怎么办呢? 最开始我也不知道该怎么做,就用了最原始的方法,替换原有的样式为新的样式,这样每次都要获取原样式,找通用 ...
- js_给元素增加或移除style属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 前端vue之属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制、v-model进阶
今日内容概要 属性指令 style和class 条件渲染 列表渲染 事件处理 数据的双向绑定 v-model进阶 购物车案例 内容详细 1.属性指令 <!DOCTYPE html> < ...
- CSS float 浮动属性
本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...
- WPF整理-Style
"Consistency in a user interface is an important trait; there are many facets of consistency, ...
- JS Div滚动，下拉框添加属性，年月日下拉条
创建某一下拉菜单的项: str = str+"<option value='"+i+"'>"+i+"</option>&quo ...
随机推荐
- NodeJS学习笔记 (4)网络服务-http(ok)
原文:https://github.com/chyingp/nodejs-learning-guide 自己敲代码: http模块概览 大多数nodejs开发者都是冲着开发web server的目的选 ...
- Eclipse配置class文件输出目录
1, Eclipse选中项目名称,邮件选中“Build Path”,然后选择“Configure Build Path”--->选择“Source” Tab---->修改"Def ...
- 总结使人进步,可视化界面GUI应用开发总结：Android、iOS、Web、Swing、Windows开发等
可视化界面的软件,是21世纪最主流的应用类型了,黑屏控制台的不适合普通用户. 2004年左右的时候,作为普通网民,接触的自然是可视化,准确是Windows那一套. 那个时候,Microsoft ...
- 经典C语言编程注意点
C/C++程序员应聘试题剖析 分中的2分.读者可从本文看到strcpy函数从2分到10分解答的例子,看看自己属于什么样的层次.此外,还有一些面试题考查面试者敏捷的思维能力. 分析这些面试题,本身包含很 ...
- 【codeforces 816A】Karen and Morning
[题目链接]:http://codeforces.com/contest/816/problem/A [题意] 让你一分钟一分钟地累加时间; 问多长时间以后是个回文串; [题解] reverse之后如 ...
- Git学习总结（7）——Git GUI学习教程
前言 之前一直想一篇这样的东西,因为最初接触时,我也认真看了廖雪峰的教程,但是似乎我觉得讲得有点多,而且还是会给我带来很多多余且重复的操作负担,所以我希望能压缩一下它在我工作中的成本,但是搜索了一下并 ...
- deeplink技术的两篇资料
两篇资料如下: https://zhuanlan.zhihu.com/p/20694818?refer=ouyangchen http://www.sohu.com/a/122694049_49134 ...
- C++写的UrlEncode和UrlDecode
关于UrlEncode的实现(C++).网上有非常多不同的版本号.对须要编码的字符集的选取并不统一.那么究竟有没有标准呢?答案是有的.參见wiki 绝对不编码的,仅仅有字母.数字.短横线(-).下划线 ...
- hdoj--3552--I can do it!(贪心模拟)
I can do it! Time Limit: 2000/2000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others) Tot ...
- zzulioj--1775-- 和尚特烦恼1——是不是素数(素数水题)
1775: 和尚特烦恼1--是不是素数 Time Limit: 2 Sec Memory Limit: 128 MB Submit: 563 Solved: 193 SubmitStatusWeb ...