<!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. Java命令使用 jmap,jps,jstack,jstat,jhat,jinfo

    Jmap:可以获得运行中的jvm的堆的快照,从而可以离线分析堆,以检查内存泄漏,检查一些严重影响性能的大对象的创建,检查系统中什么对象最多,各种对象所占内存的大小等等 Jmap是一个可以输出所有内存中 ...

  2. Centos7.2 安装Elasticsearch 6

    下载 elasticsearch.6.0.0.tar.gz 迁移文件到usr/local中 mv elasticsearch-.tar.gz /usr/local/ cd /usr/local tar ...

  3. 1-20 RHEL7的启动原理和服务控制

    大纲: RHEL7启动原理 RHEL7服务启动配置 网络概述 发布内网服务器 ############################################################ ...

  4. java反射基础

    转载请注明出处:https://i.cnblogs.com/EditPosts.aspx?opt=1最近在接触到框架的底层的时候,遇到了反射,便想好好的学习和总结一下反射,帮助理解java框架的运行流 ...

  5. js访3d上下轮播图

    js/css访3d上下轮播图 (附件) <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  6. HDU 3046 Pleasant sheep and big wolf（最小割最大流+Dinic）

    http://acm.hdu.edu.cn/showproblem.php?pid=3046 题意: 给出矩阵地图和羊和狼的位置,求至少需要建多少栅栏,使得狼不能到达羊. 思路:狼和羊不能到达,最小割 ...

  7. UVa 10881 蚂蚁

    https://vjudge.net/problem/UVA-10881 题意: 一根长度为L厘米的木棍上有n只蚂蚁,每只蚂蚁要么朝左爬,要么朝右爬,速度为1厘米/秒.当两只蚂蚁相撞时,二者同时掉头. ...

  8. 洛谷P2777 [AHOI2016初中组]自行车比赛

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  9. Thunder团队--Alpha发布用户报告

    用户数量:12人 以下为用户评论:(注:为了保护用户的姓名权,以下用户名以昵称形式给出.) 用户名(昵称) 用户使用频次 用户评论(以图片展示) 小王 3次 米线 2次 孔小姐 5次 乌乌鸟 2次 永 ...

  10. 手把手教你开发jquery插件

    I have said that i dislike jQuery UI’s unified API, so i want to get the instance of the component a ...