<!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. Python3基础 os listdir curdir pardir 查看工作目录及其上一级目录的所有文件名

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

  2. HDU 1358 Period（KMP+最小循环节）题解

    思路: 这里只要注意一点,就是失配值和前后缀匹配值的区别,不懂的可以看看这里,这题因为对子串也要判定,所以用前后缀匹配值,其他的按照最小循环节做 代码: #include<iostream> ...

  3. Node10.15.0的安装

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

  4. Unity3D学习笔记（十七）：IK动画、粒子系统和塔防

    新动画系统: 反向动力学动画(IK功能): 魔兽世界(头部动画),神秘海域(手部动画),人类一败涂地(手部动画) 如何启用(调整) 1.必须是新动画系统Animator 设置头.手.肘的目标点 2.动 ...

  5. Spooling技术

    转自https://blog.csdn.net/weixin_42229896/article/details/80736517   假脱机的概念 SPOOLing技术:利用高速共享设备(通常是磁鼓或 ...

  6. 【NOI2013】小Q的修炼

    题目链接:http://uoj.ac/problem/123 又开提答坑啦,要不是一定要讲题谁他妈要这样伤害自己 CASE 1,2 首先可以打一个通用暴力,用于模拟操作过程,对于每一个操作随机一个选择 ...

  7. hdu 5668 Circle 中国剩余定理

    Circle Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Problem D ...

  8. mybatis generator插件系列--lombok插件 （减少百分之九十bean代码）

    经常使用mybatis generator生成代码的你 有没有因为生成的getter/setter而烦恼呢? 有没有生成后又手动加toString/hashCode/Equals方法呢? 有没有改一个 ...

  9. robot_pose的类型

    http://docs.ros.org/api/geometry_msgs/html/msg/Pose.html

  10. Spring 事物机制总结

    Spring两种事物处理机制,一是声明式事务,二是编程式事务 声明式事物 1)Spring的声明式事务管理在底层是建立在AOP的基础之上的.其本质是对方法前后进行拦截,然后在目标方法开始之前创建或者加 ...