<!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. Excel中Application和ApplicationClass的区别

    Application和ApplicationClass的联系和区别Application和ApplicationClass都继承自接口_Application.Application为接口.Appl ...

  2. fread

    快速读入? 不知道 反正只是贴过来的 以后或许会用到? #define FI(n) FastIO::read(n) namespace FastIO { << ; ]; int bi = ...

  3. Android程序示例

    目录 Android代码示例 OptionsMenu ImageButton CheckBox & RadioButton Context Menu快捷菜单 Key Event ListVie ...

  4. 【TCP/IP详解 卷一：协议】第二十一章 TCP的超时与重传

    作为TCP的重头戏,本章节涉及了许多关于计算方面的内容,使用了大量的例子来指明一些观点. 我使用的理解方法是:通过别人的博客,以及实例结合进行理解,不然会很吃力. 21.1 引言 reliable T ...

  5. 【TCP/IP详解 卷一：协议】第十七章 TCP：传输控制协议

    本章作为TCP的入门章节,简单的概述了一些TCP的知识,和TCP数据报的首部格式. TCP 最重要的特性:reliable. 17.1 引言 本章介绍的是 TCP为应用层提供的服务. 17.2 TCP ...

  6. 3：JavaScript中的各类语句

    上面我们说完了数据类型和基本运算  下面说的就是各种类型的语句 --- ---------------------------------------------------------------- ...

  7. Beta冲刺

    第一天 日期:2018/6/24 1 今日完成任务情况. 妥志福.牛瑞鑫: 完成任务:数据库设计完成数据导入成功 王胜海.马中林: 完成任务:代码规范检查 董润园.邓英蓉: 完成任务:平台基本功能黑盒 ...

  8. boosting方法

    概述 Boosting基本思想: 通过改变训练数据的概率分布(训练数据的权值分布),学习多个弱分类器,并将它们线性组合,构成强分类器. Boosting算法要求基学习器能对特定的数据分布进行学习,这可 ...

  9. /etc/fstab 文件解析

    首先介绍一下fstab :这个文件描述系统中各种文件系统的信息.一般而言,应用程序仅读取这个文件,而不对它进行写操作.对它的维护是系统管理员的工作.在这个文件中,每个文件系统用一行来描述,在每一行中, ...

  10. URAL 1183 Brackets Sequence

    URAL 1183 思路:区间dp,打印路径,详见http://www.cnblogs.com/widsom/p/8321670.html 代码: #include<iostream> # ...