<!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属性)的更多相关文章

  1. Vue 设置style属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 013——VUE中多种方式使用VUE控制style样式属性

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 黑马vue---17、vue中通过属性绑定绑定style行内样式

    黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...

  4. vue的计算属性computed和监听器watch

    <template> <div> this is A.vue <br> <!--计算属性--> <label for="msg" ...

  5. Vue（十二）vue实例的属性和方法

    vue实例的属性和方法 1. 属性 vm.$el vm.$data vm.$options vm.$refs <!DOCTYPE html> <html lang="en& ...

  6. vue实例的属性和方法

    vue实例的属性和方法 1. 属性 vm.$el #指定要绑定的元素 vm.$data #Vue 实例的数据对象 vm.$options #获取自定义属性的值 new Vue({ customOpti ...

  7. Vue的Key属性，v-for和v-if，v-if/v-show，v-pre不渲染，v-once只渲染一次

    key属性为什么要加 key -- api 解释 key的特殊属性主要用在vue的虚拟dom算法,如果不适用key,vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法. ...

  8. Vue 设置style样式

    1.直接添加行内样式 2.通过绑定设置style样式 3.将vue的属性设置为样式 4将多个vue属性设置为样式 <div id="box"> <!--直接添加样 ...

  9. 黑马vue---16、vue中通过属性绑定为元素设置class类样式

    黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...

随机推荐

  1. The equation （扩展欧几里得）题解

    There is an equation ax + by + c = 0. Given a,b,c,x1,x2,y1,y2 you must determine, how many integer r ...

  2. Node10.15.0的安装

    1. 首先我们需要去node官网下载最近版本的压缩包,然后我们把他们解压到我们自定义的安装路径,我使用的是/usr/local/lib/nodejs VERSION=v10.15.0 DISTRO=l ...

  3. BZOJ1307: 玩具 单调队列

    Description 小球球是个可爱的孩子,他喜欢玩具,另外小球球有个大大的柜子,里面放满了玩具,由于柜子太高了,每天小球球都会让妈妈从柜子上拿一些玩具放在地板上让小球球玩. 这天,小球球把所有的N ...

  4. 第五次程序设计作业 C++计算器雏形 调用文件输入输出

    一.C++计算器作业系列链接 第三次作业:C++计算器雏形 第三次作业附加:代码规范 第四次作业:命令行的调用及计算 MyGithub 二.本次作业相关 要求:第五次程序设计作业 根据这一次的作业要求 ...

  5. python分享题目

    目前的分享题目:1 python在云计算虚拟教室领域的应用 2 python与虚拟货币(华三工程师) 3 python在移动游戏的实践(爪子) 4 python互联网敏捷运维实践(蓝雪) 5 pyth ...

  6. Hashtable、HashMap、TreeMap心得

    三者均实现了Map接口,存储的内容是基于key-value的键值对映射,一个映射不能有重复的键,一个键最多只能映射一个值. (1) 元素特性 HashTable中的key.value都不能为null; ...

  7. lambda表达式/对象引用计数

    ★lambda表达式的用法例:I=[(lambda x: x*2),(lambda y: y*3)]调用:for x in I: print x(2)输出:4,6 ★获取对象的引用次数sys.getr ...

  8. English trip -- VC(情景课)10 B Around the house 在家里

    Vocablulary focus  核心词汇 cook play the guitar listen to music watch TV read magazines work in the gar ...

  9. LeetCode--198--打家劫舍

    问题描述: 你是一个专业的小偷,计划偷窃沿街的房屋.每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动报警. 给 ...

  10. P1758 [NOI2009]管道取珠

    考虑这个式子的意义. 不妨看做进行了两轮操作,这个式子显然等价于两次操作后得到的序列相同的方案数. 这个东西显然是可以dp的. 随便优化一下就成了O(n^3)