<!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. (转)CentOS（5.8/6.4）linux生产环境若干优化实战

    CentOS(5.8/6.4)linux生产环境若干优化实战 原文:http://blog.51cto.com/oldboy/1336488 特别说明:本文来自老男孩linux培训VIP学生学习笔记. ...

  2. 2018护网杯-easy_laravel 复现

    题目docker环境: https://github.com/sco4x0/huwangbei2018_easy_laravel git clone下来直接composer up -d 运行即可,可以 ...

  3. hibernate课程 初探单表映射1-4 hibernate开发前准备

    开发前准备: 1 eclipse 2 hibernate tools的安装(需要相关的jar包)(可以简化orm框架) hibernate tools的安装步骤: 1 到官网下载 https://so ...

  4. 《敏捷软件开发：原则、模式与实践（C#版）》源代码下载

    Agile Software Development: Principles, Patterns and Practice (C# Edition)  Source Code 这本书的经典性无需多言 ...

  5. RING0到RING3

    在前一篇文章里面,我们将了CPU保护模式中的几种特权RING0,RING1,RING2,RING3!操作系统通常运行在RING0,应用程序通常运行在RING3. CPU如何从RING0到RING3 先 ...

  6. 《Unity預計算即時GI》笔记：一、基本概念与一些设置

    说明 这篇文章是对<Unity預計算即時GI>这个系列文章的笔记. 基本概念 在Unity裡,可以用兩種不同的技術來計算全域光照GI或光源反射,就是烘焙全域光照(Baked GI)和預計算 ...

  7. linux设置history历史记录

    #说明export HISTSIZE=1000 #设置历史记录显示1000行export HISTTIMEFORMAT='%F %T ' #设置历史记录格式 999 2017-08-15 10:58: ...

  8. Zabbix邮件报警设置方法

    实现目的: 在Zabbix服务端设置邮件报警,当被监控主机宕机或者达到触发器预设值时,会自动发送报警邮件到指定邮箱. 具体操作: 以下操作在Zabbix监控服务端进行 备注:Zabbix监控服务端 操 ...

  9. zabbix-2.2.2（Ubuntu 14.04 LTS/OpenLogic 7.2）

    平台: arm 类型: ARM 模板 软件包: apache-2.4.7 mariadb-5.5.50 mysql-5.5.52-0ubuntu0.14.04.1 php-5.4.16 php-5.5 ...

  10. 谷歌chrome://chrome-urls/

    查看DNS解析时间 1 chrome://dns/ 查看DNS解析的地址 1 chrome://net-internals/#dns 更多功能请参考 1 chrome://chrome-urls/ 以 ...