<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<title>vue</title>

	<link rel="stylesheet" href="">

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	<!-- <script type="text/javascript" src="../js/vue.js"></script> -->

	<style type="text/css">

		.red{

			color: red;

		}

		.hd{

			color: green;

		}

		#y{

			color: yellow;

		}

	</style>

</head>

<body>

	<div id="vue">

		<!-- v-bind:class="" 是绑定的class意思(可以写成 :class="")

		v-bind:id="" 是绑定id的意思(可以写成 :id="") -->

		<h1 v-bind:class="red" >VUE</h1> <!-- 这里red是变量,从下面的data里取值 -->

		<h1 :class = "hd">VUE</h1>

		<!-- 这里hd加上单引号后,hd就是字符串了,就是class="hd"的意思 -->

		<h1 :class = "'hd'">VUE</h1>

		<h1 v-bind:id="y">VUE</h1>

	</div>

</body>

<script type="text/javascript">

 var app=new Vue({

 	el:'#vue',

 	data:{

 		red:'red',

 		hd:'hd',

 		y:'y',

 	}

 });

</script>

</html>

效果:

02.VUE学习二之数据绑定的更多相关文章

  1. day 82 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  2. day 81 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  3. Vue学习二：v-model指令使用方法

    本文为博主原创,未经允许不得转载: <!DOCTYPE html> <html lang="zh"> <head> <script src ...

  4. Vue学习(二)-Vue中组件间传值常用的几种方式

    版本说明:vue-cli:3.0 主要分为两类: 1.父子组件间的传值 2.非父子组件间的传值 1.父子组件间传值 父组件向子组件传值 第一种方式: props 父组件嵌套的子组件中,使用v-bind ...

  5. vue学习二:

    vue的常用标签: 1.<router-link to=''>主要实现跳转链接功能,属性to='/'即是跳转到path为'/'的路径. 2.v-bind动态绑定指令,格式为:v-bind: ...

  6. vue 学习二 深入vue双向绑定原理

    vue双向绑定原理 请示总体来讲 就是为data的中的每个属性字段添加一个getter/seter属性 以此来追踪数据的变化,而执行这部操作,依赖的就是js的Object.defineProperty ...

  7. vue 学习 二

    动画 <transition name="fade"> <p v-if="show">hello</p> </tran ...

  8. vue学习(二) 三个指令v-cloak v-text v-html

    //style <style> [v-cloak]{ display:none } </style> //html <div id="app"> ...

  9. vue学习(二)

随机推荐

  1. jquery的.get方法说解

    ·Customer类 public class Customer { public int Unid { get; set; } public string CustomerName { get; s ...

  2. Python3学习实例上手（1）-----模拟登录认证

    要求:输入用户名.密码进行认证,认证成功则欢迎,若输错三次会锁定最后一次输入的用户 知识点归纳:字典操作(items()方法).字符串操作(如strip().split()等).文件读写(for li ...

  3. 阐述简称PO，VO，TO，BO，DAO，POJO

    PO(persistant object) 持久对象 在o/r映射的时候出现的概念,如果没有o/r映射,没有这个概念存在了.通常对应数据模型(数据库),本身还有部分业务逻辑的处理.可以看成是与数据库中 ...

  4. ZR18提高5解题报告

    不想说啥了,比赛期间智商全程下线 A 设$f[i][j]$表示前$i$个位置,前缀和为$j$的方案数,转移的时候该位置放了什么,以及该位置之前的和是多少. 发现第二维可以前缀和优化. 不用管代码里的f ...

  5. 【Java/Android性能优 7】Android公共库——图片缓存 网络缓存 下拉及底部更多ListView 公共类

    本文转自:http://www.trinea.cn/android/android-common-lib/ 介绍总结的一些android公共库,包含缓存(图片缓存.预取缓存.网络缓存).公共View( ...

  6. isset或array_key_exists，检查数组键是否存在

    今天在导出报表的时候遇到了一个问题,undefined index:pid,然后就纳闷了,我的数组里面根本就没有pid,为什么会出现这个错误呢,我遍历了一下数组,发现果然有pid这个键,奇怪呀,我有做 ...

  7. 性能调优--大事务与Alwayson 之间的关系

    最近性能调优的事比较多,所以摘一些比较有特点的 案例分享下. 业务系统用的是sql server 2016 ,搭建的ALWAYSON 两节点的 群集,今天早上突然辅助 副本的只读库出现大量的等待导致系 ...

  8. pta 编程题10 Root of AVL Tree

    其它pta数据结构编程题请参见:pta 这道题考察平衡二叉查找树的插入. 为了保证二叉查找树的平衡,当一个结点的左右子树的高度差大于1时就要进行调整. 分为以下四种情况: 插入新节点后,以及旋转之后, ...

  9. linux 命令——56 netstat(转）

    netstat命令用于显示与IP.TCP.UDP和ICMP协议相关的统计数据,一般用于检验本机各端口的网络连接情况.netstat是在内核中访问网络及相关信息的程序,它能提供TCP连接,TCP和UDP ...

  10. UVA Live Archive 4394 String painter（区间dp）

    区间dp,两个str一起考虑很难转移. 看了别人题解以后才知道是做两次dp. dp1.str1最坏情况下和str2完全不相同,相当于从空白串开始刷. 对于一个区间,有两种刷法,一起刷,或者分开来刷. ...