<!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">

		.h1{

			color: red;

		}

		.h2{

			color: green;

		}

	</style>

</head>

<body>

	<div id="vue">

		<!-- v-once动态改变后不会影响-->

		<span v-once>{{n}}</span>

		<br/>

		<!-- 表达示初始化时会相加,动态改变后表达示再重新计算-->

		{{ n + 2}}

		<br/>

		<span :class="'h'+n">你好vue.</span>

		<br/>

		<input type="text" v-model="n">

		<br/>

		<!--单选框的改变动态会影响到data里的n,渐接影响到模板里的n-->

		<input type="radio" v-model="n" value="1">红色

		<input type="radio" v-model="n" value="2">绿色

	</div>

</body>

<script type="text/javascript">

	var app=new Vue({

		el:'#vue',

		data:{

		    n:1,

		}

	});

</script>

</html>

效果:

05.VUE学习之表达式的更多相关文章

  1. vue学习5-js表达式

    三目运算符 <!DOCTYPE html> <html lang='en'> <head>  <meta charset='UTF-8'>  <m ...

  2. Vue学习-01

    1.vue 学习 v-bind:title 数据绑定 v-if 判断显示或者隐藏 <div id="app-3"> <p v-if="seen" ...

  3. Vue学习2：模板语法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. vue 学习笔记（二）

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

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

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

  6. day 81 Vue学习一之vue初识

      Vue学习一之vue初识   本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js ...

  7. vue学习01

    vue学习01   1. 创建一个Vue实例官网-学习-教程-安装-(开发/生产版本)-与jQuery的引用相似 <!DOCTYPE html> <html> <head ...

  8. VUE学习总结

    VUE学习总结 文档:https://cn.vuejs.org/v2/guide/ Webstorm的一些常用快捷键:1. ctrl + shift + n: 打开工程中的文件,目的是打开当前工程下任 ...

  9. 20145219 《Java程序设计》第05周学习总结

    20145219 <Java程序设计>第05周学习总结 教材学习内容总结 try.catch 1.求平均数程序示例 import java.util.Scanner; public cla ...

随机推荐

  1. eclipse链接Hadoop集群时报错Error：Call From xxx/xxx.xxx.xxx.xxx to hostname1:9000 failed on connection exception

    今天用eclipse连接Hadoop集群的时候突然给我报了这样一个错误:Error:Call From xxx/xxx.xxx.xxx.xxx to hostname1:9000 failed on ...

  2. 网络爬虫之记一次js逆向解密经历

    1 引言 数月前写过某网站(请原谅我的掩耳盗铃)的爬虫,这两天需要重新采集一次,用的是scrapy-redis框架,本以为二次爬取可以轻松完成的,可没想到爬虫启动没几秒,出现了大堆的重试提示,心里顿时 ...

  3. 使用Docx.dll插入图片在Centos 7 上报错：system.DllNotFound:libgdiplus.so

    熬了N天,终于把WORD 文档打开替换.插入图片完好,部署,本机测试没有问题 可是一放到服务器(Centos 7) 就提示下面的错误: 度娘一下: https://www.cnblogs.com/xi ...

  4. SpringBoot的优缺点

    优点: 1.快速构建项目 2.对主流开发框架的无配置继承 3.项目可独立运行,无须外部依赖Servlet容器 4.提高运行时的应用监控 5.极大地提高了开发.部署效率 6.与云计算的天然集成 缺点: ...

  5. Spring Boot概要

    1.Spring Boot使用“习惯优于配置”(项目中存在大量的配置,此外还内置了一个习惯性的配置)的理念,使用户的项目实现快速运行.通过学习Spring Boot中的配置文件application. ...

  6. JS实现正则表达式

    一.创建正则表达式 一共有两种方式: 1.直接量:var re = /[0-9]*/; 2.通过RegExp对象的构造函数:var re = RegExp("[0-9]*",&qu ...

  7. pta 编程题13 File Transfer

    其它pta数据结构编程题请参见:pta 这道题考察的是union-find并查集. 开始把数组中每个元素初始化为-1,代表没有父节点.为了使树更加平衡,可以让每一个连通分量的树根的负值代表这个连通分量 ...

  8. c++ vector & 二维数组 & MessageBox

    vector: https://www.cnblogs.com/mr-wid/archive/2013/01/22/2871105.html c++ 二维数组: int **p; p = new in ...

  9. java Vamei快速教程09 类数据和类方法

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 我们一直是为了产生对象而定义类(class)的.对象是具有功能的实体,而类是对象的 ...

  10. mysqlimport命令

    mysqlimport的大多数选项直接对应LOAD DATA INFILE子句. 选项: -u,--user 指定连接用户名.   -p,--password[name] 指定连接用户的密码.   - ...