<!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. Linux中vim编辑器的总结

    vi( Visual Interface ) vim( VI iMproveed ):为纯文本(ASCII)全屏编辑器,也是模式化编辑器. vim的三种模式: 1)编辑模式(命令模式) 2)输入模式 ...

  2. java里如何实现循环打印出字符串或字符串数组里的内容

    不多说,直接上干货! java里如何实现循环打印出字符串里的内容 思路:可以先将字符串转换成字符串数组. public class test { public static void main(Str ...

  3. Java 内存模型（一）

    打算花比较长的篇幅来描述下自己理解的JVM,尽量描述的清晰易懂一些,从简单慢慢到慢慢深入,一方面自己也复习一下,一方面也供大家参考,少走些弯路.鉴于本人水平有限,如有错误的地方,欢迎指出,感谢. 一段 ...

  4. EditPlus常用操作

    EditPlus注册码在线生成 http://www.jb51.net/tools/editplus/ 随意填写个用户名,生成对应的密码就可以使用editplus了 EditPlus常用快捷键 编代码 ...

  5. 记ubuntu下安装Anaconda

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

  6. linux下使用shell脚本批处理命令

    1.新建脚本touch first.sh 2.写入命令vi first.sh #!/bin/bash #publish service and api echo "copy file&quo ...

  7. 项目开发bug记录

    项目开发中遇到了一个问题,类中出现未知属性 ‘ $jacocoData ’,准确的来说,实际上在集成测试阶段,系统自动运行测试用例时,抛出来的异常提示信息,但是在开发阶段是不存在的.这个问题是以前没有 ...

  8. vuejs 生命周期 updated

    前段时间 公司领导提示出了一个需求就是 像微信朋友圈一样,刷列表 一直刷到 底部或者是半中央,然后点击返回或者是离开一下 页面,再辞进入朋友圈页面依然现实的还是之前滚动的位置. 我现在做的公司贷后系统 ...

  9. TAS5508 output changing

    1.如果信号从3th通道输入,正常就是从PWM5,6输出,现在要想从PWM7,8输出,就按照以下红线部分选择DAP CH5和DAP CH6,然后写入相应寄存器产生的12 bytes的数组数据即可.

  10. Java Annotation使用详解

    Java  Annotation是JDK5.0引入的一种注释机制.它与注释有一定区别,可以理解为代码上的特殊标记,通过这些标记我们可以在编译,类加载,运行等程序类的生命周期内被读取.执行相应的处理.通 ...