<!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. Solve Equations HackerRank 扩展欧几里德 && 数学

    https://www.hackerrank.com/contests/infinitum16-firsttimer/challenges/solve-equations 给定一条方程a*x + b* ...

  2. Unity3D游戏高性能战争迷雾系统实现

    一 效果图 先上效果图吧,这是为了吸引到你们的ヽ(｡◕‿◕｡)ﾉﾟ 战争迷雾效果演示图 战争迷雾调试界面演示图 由于是gif录制,为了压缩图片,帧率有点低,实际运行时,参数调整好是不会像这样一卡一顿的 ...

  3. JMeter tomcat测试请求

    JMeter tomcat测试请求 Apache Jmeter是开源的压力测试工具,可以测试tomcat 的吞吐量等信息 下载地址: http://jmeter.apache.org/download ...

  4. 记ubuntu下安装Anaconda

    晚上尝试在ubuntu 16.04版本下安装python的Anaconda3发行版. 从清华源下载的Anaconda3-Linux 64位版本安装包,然后顺利的下一步,下一步.....一切顺利!结果到 ...

  5. P1681 最大正方形 Iand II

    题目描述 在一个n*m的只包含0和1的矩阵里找出一个不包含0的最大正方形,输出边长. 输入输出格式 输入格式: 输入文件第一行为两个整数n,m(1<=n,m<=100),接下来n行,每行m ...

  6. Unity C# 反射

    什么是反射 在.NET中的反射也可以实现从对象的外部来了解对象(或程序集)内部结构的功能,哪怕你不知道这个对象(或程序集)是个什么东西,另外.NET中的反射还可以运态创建出对象并执行它其中的方法. 反 ...

  7. C# 连接 postgres失败

    小程序完成了,要发布到客户的服务器上: 我的测试机:win10  64             数据库:PG9.6.5     64 客户服务器:win7    32             数据库: ...

  8. iQuery stop()

    jQuery stop() 方法 jQuery stop() 方法用于停止动画或效果,在它们完成之前. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. 语法 $ ...

  9. Azure School，让你系统化快速学习人工智能

    要说目前最热门的技术,非人工智能莫属了,让计算机程序能够看懂.听懂.读懂.理解我们的世界!想想就激动!! 上至高大上的个人数字化助理,下至P图软件,各种应用都开始增加AI相关的功能,试问又有哪个技术爱 ...

  10. jquery实现加载更多效果

    情况是当滑动条滑动到最底部的时候,数据显示出一部分的更多 思路:获取到浏览器屏幕的高度client,文档的高度h和滑动距离顶部的距离scroll,当h<=client+scroll的时候就是滑动 ...