练习vue(class,style属性)
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>练习vue(class,style属性)</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/vue.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
window.onload = function() {
let vm = new Vue({
el: "#itany",
data: {
bb: 'aa',
dd: 'cc'
}
});
}
</script>
<style>
.aa {
color: red;
font-size: 20px;
} .cc {
background-color: #ccc;
}
</style>
</head> <body>
<div id="itany">
<!--<p v-bind:class="aa">今天天气真棒！</p>-->
<!--<p :class="aa">今天天气真棒！</p>-->
<!--方式1：变量形式-->
<!--<p v-bind:class="bb">今天天气真棒！</p>-->
<!--方式2：数组形式-->
<!--<p v-bind:class="[bb,dd]">今天天气真棒！</p>-->
<!--方式3：json形式
<p v-bind:class="{aa:true}">今天天气真棒！</p>-->
</div> </body> </html>
练习vue(class,style属性)的更多相关文章
- Vue 设置style属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 013——VUE中多种方式使用VUE控制style样式属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 黑马vue---17、vue中通过属性绑定绑定style行内样式
黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...
- vue的计算属性computed和监听器watch
<template> <div> this is A.vue <br> <!--计算属性--> <label for="msg" ...
- Vue（十二）vue实例的属性和方法
vue实例的属性和方法 1. 属性 vm.$el vm.$data vm.$options vm.$refs <!DOCTYPE html> <html lang="en& ...
- vue实例的属性和方法
vue实例的属性和方法 1. 属性 vm.$el #指定要绑定的元素 vm.$data #Vue 实例的数据对象 vm.$options #获取自定义属性的值 new Vue({ customOpti ...
- Vue的Key属性，v-for和v-if，v-if/v-show，v-pre不渲染，v-once只渲染一次
key属性为什么要加 key -- api 解释 key的特殊属性主要用在vue的虚拟dom算法,如果不适用key,vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法. ...
- Vue 设置style样式
1.直接添加行内样式 2.通过绑定设置style样式 3.将vue的属性设置为样式 4将多个vue属性设置为样式 <div id="box"> <!--直接添加样 ...
- 黑马vue---16、vue中通过属性绑定为元素设置class类样式
黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...
随机推荐
- Python3基础 list reversed 列表逆转并输出
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- hdu2552 （浮点数复杂运算的四舍五入）题解
三足鼎立 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...
- Max Factor（素数筛法）题解
Max Factor Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- HDU 1811（并查集+拓扑排序）题解
Problem Description 自从Lele开发了Rating系统,他的Tetris事业更是如虎添翼,不久他遍把这个游戏推向了全球.为了更好的符合那些爱好者的喜好,Lele又想了一个新点子:他 ...
- UVa 820 因特网带宽（最大流）
https://vjudge.net/problem/UVA-820 题意: 给出所有计算机之间的路径和路径容量后求出两个给定结点之间的流通总容量. 思路: 裸的最大流问题.注意有个比较坑的地方,最后 ...
- hdu 2586 How far away ？ 带权lca
How far away ? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) P ...
- 《Robot Framework自动化测试修炼宝典》道长
1. Python下载https://www.python.org/downloads 2. Setuptools下载https://pypi.python.org/pypi/setuptools用原 ...
- Mysql-SqlServer区别
/* sql规范 所有关键字大写 表面跟字段跟数据库对应 一条sql语句结束必须跟;号 */ /*关键字处理*/ --sqlserver SELECT * FROM [Date]; --mysql S ...
- F4+2 团队项目软件设计方案
目录 1引言 1.1编写目的 1.2背景 1.3定义 1.4参考资料 2总体设计 2.1需求规定 2.2运行环境 2.3基本设计概念和处理流程 2.4功能描述 2.5功能器求与程序的关系 2.6人工处 ...
- Codeforces 847B - Preparing for Merge Sort
847B - Preparing for Merge Sort 思路:前面的排序的最后一个一定大于后面的排序的最后一个.所以判断要不要开始新的排序只要拿当前值和上一个排序最后一个比较就可以了. 代码: ...