<!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. VC++禁止标题栏鼠标双击事件

    转载:http://blog.sina.com.cn/s/blog_4ad042e50102dwv0.html 重载DefWindowProc,在里面截获WM_NCLBUTTONDBLCLK消息进行处 ...

  2. Python3基础 逻辑运算 and or not 示例

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  3. P2709 小B的询问

    题目描述 小B有一个序列,包含N个1~K之间的整数.他一共有M个询问,每个询问给定一个区间[L..R],求Sigma(c(i)^2)的值,其中i的值从1到K,其中c(i)表示数字i在[L..R]中的重 ...

  4. Java8中数据流的使用

    Code: @Data @ToString @NoArgsConstructor @AllArgsConstructor public class Employee { private Integer ...

  5. HDU 3974 Assign the task（DFS序）题解

    题意:给出一棵树,改变树的一个节点的值,那么该节点及所有子节点都变为这个值.给出m个询问. 思路:DFS序,将树改为线性结构,用线段树维护.start[ ]记录每个节点的编号,End[ ]为该节点的最 ...

  6. BZOJ5188: [Usaco2018 Jan]MooTube 并查集+离线处理

    BZOJ又不给题面... Luogu的翻译看不下去... 题意简述 有一个$n$个节点的树,边有权值,定义两个节点之间的距离为两点之间的路径上的最小边权 给你$Q$个询问,问你与点$v$的距离超过$k ...

  7. 【Coursera】SecondWeek(2)

    The First Two Packets on the Internet Leonard Kleinrock Kleinrock 是一名工程师和计算机科学家,他在APRANET网络中起到了至关重要的 ...

  8. MVC ---- IEnumerable<T>、List<T> 前台遍历展示

    突然做前台数据展示,发现IEnumerable 对一个列表的展示还是可以,但要是多个类型放在一个表中如何处理呢,如下: 一个类IEnumerable遍历 后台 public IEnumerable&l ...

  9. 关于Java 中Integer 和Long对象 对比的陷阱（简单却容易犯的错误）

    彩票客户端“忘记密码”功能有bug,今天调试时,发现了原因: 功能模块中有一段: if(userpo.getId()!=Long.valueOf(uid)){ throw new VerifyExce ...

  10. 如何上传本地文件到github又如何删除自己的github仓库

    首先自己在https://github.com/网站要注册一个账户 自己上传工程到jithub,没有付费的用户只能选用public,意味着你的项目在全网是可以被看到和下载的: 所以涉及私密信息的,需要 ...