<!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. Duilib 控件类html富文本绘制

    转载:http://blog.csdn.net/wyansai/article/details/51088896 转载:http://blog.csdn.net/lixiang987654321/ar ...

  2. cogs 444. [HAOI2010]软件安装

    ★★☆   输入文件:install.in   输出文件:install.out   简单对比 时间限制:1 s   内存限制:128 MB [问题描述]现在我们的手头有N个软件,对于一个软件i,它要 ...

  3. MAC BOOK Air 安装metasploit-framework

    Step 1:Xcode命令行开发工具OS X确保它已经安装了Xcode开发工具,在终端执行: xcode-select --install1Step 2:Java SDK安装Java sdk,不能用 ...

  4. P3466 [POI2008]KLO-Building blocks

    目录 题目 思路 错误 代码 题目 luogu csdn好像限制了展开博客次数,真的好xx 思路 显然一段区间内的值一定是他的中位数 少一点比多一点好 然后就可以枚举区间了 区间答案为 val[mid ...

  5. P2472 [SCOI2007]蜥蜴（网络最大流）

    P2472 [SCOI2007]蜥蜴 题目描述 在一个r行c列的网格地图中有一些高度不同的石柱,一些石柱上站着一些蜥蜴,你的任务是让尽量多的蜥蜴逃到边界外. 每行每列中相邻石柱的距离为1,蜥蜴的跳跃距 ...

  6. Big Number-Asia 2002, Dhaka (Bengal) （计算位数）题解

    Big Number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total ...

  7. mysql-5.7.20-winx64.zip Zip版、解压版MySQL安装

    1.  zip下载地址: https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.20-winx64.zip 2.官方文档位置: http:// ...

  8. 使用 PYTHON 为 PIP 搭建 HTTP 代理

    在一台没有 Root 权限的机器上,部署使用 Python 编写的服务,似乎只有 virtualenv 一条路可以选了. 当然我见过一些同事会在自己的家目录编译一个,然后设置一下 $PATH ,但是从 ...

  9. github+hexo搭建博客

    引言     之前用阿里云弹性web托管采用wordpress搭建的个人博客,经过我使用一段时间之后发现存在很多问题: 网站的响应速度非常慢,估计打开主页需要3-4s的时间,我经过搜索发现很多人都有这 ...

  10. 浅谈PHP5中垃圾回收算法

    原文链接:http://www.cnblogs.com/leoo2sk/archive/2011/02/27/php-gc.html PHP是一门托管型语言,在PHP编程中程序员不需要手工处理内存资源 ...