<!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. 《从0到1学习Flink》—— Flink 项目如何运行？

    前言 之前写了不少 Flink 文章了,也有不少 demo,但是文章写的时候都是在本地直接运行 Main 类的 main 方法,其实 Flink 是支持在 UI 上上传 Flink Job 的 jar ...

  2. 使用Java生成带有下划线字体的文字

    HashMap<TextAttribute, Object> hm = new HashMap<TextAttribute, Object>(); hm.put(TextAtt ...

  3. 独立安装Oracle Hyperion Enterprise Performance Management 验证过程

    在安装EPM的过程中,都是安装既定的操作手册进行,只是一个过程的重复,对自己安装不会留下深刻的印象.根据自己学习体会,制定安装步骤,去验证自己学习过程中的体会,加深学习印象,解决安装中遇到的问题,模仿 ...

  4. logback的加载过程

    使用logback-classic.jar时,启动应用后,logback按照以下顺序进行扫描: 1.在系统配置文件System Properties中寻找是否有logback.configuratio ...

  5. MySQL访问

    MySQL访问 1.介绍 python访问mysql数据库,需要安装mysql的python插件. 2.安装插件 通过pip命令安装mysql插件. # cmd>pip install PyMy ...

  6. char*、string、CString各种字符串之间转换

    参考博客: http://blog.csdn.net/luoweifu/article/details/20242307 http://blog.csdn.net/luoweifu/article/d ...

  7. WORD窗体保护密码清除

    Word 2003破解方法如下:1.用Word打开已设置有密码的“保护文档”(原始DOC文件):2.菜单中选择“文件”→“另存为Web页”,保存为HTML文件然后关闭Word:3.用文本编辑器(如:记 ...

  8. js 对象字面量

    对象字面量的输出方式以及定义好处 1.对象字面量的输出方式有两种:传统的'.' 例如:box.name 以及数组方式,只不过用数组方式输出时,方括号里面要用引号括起来 例如:box['name'] v ...

  9. POJ-1459 Power Network---最大流

    题目链接: https://cn.vjudge.net/problem/POJ-1459 题目大意: 简单的说下题意(按输入输出来讲,前面的描述一堆的rubbish,还用来误导人),给你n个点,其中有 ...

  10. 2018.6.20 Java考试试题总结（Java语言基础与面向对象编程）最新版

    Java考试试题总结 一.单选题(每题1分 * 50 = 50分) 1．java程序的执行过程中用到一套JDK工具,其中javac.exe指( B ) A．java语言解释器 B．java字节码编译器 ...