Vue学习（三）：数据绑定语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据绑定语法</title>
</head>
<body>
<!--1.插值-->
<!--文本插值-->
<h3 id="example1">{{ message }}</h3>
<!--文本单次插值（当数据改变时，插值处的内容不会继续更新）-->
<h3 id="example2" v-once>{{ message }}</h3>
<!--原始的 HTML 插值-->
<div id="example3" v-html="htmlValue"></div> <!--2.JavaScript 表达式-->
<div id="example4">
<p>{{ number + 1 }}</p>
<p>{{ ok ? 'YES' : 'NO' }}</p>
<p>{{ message.split('').reverse().join('') }}</p>
</div> <script type="text/javascript" src="vue.min.js"></script>
<script>
// example 1
let vm1 = new Vue({
el: '#example1',
data: {
message: 'Hello Vue.'
}
}); // example 2
let vm2 = new Vue({
el: '#example2',
data: {
message: 'Hello Vue.'
}
});
// 改变`message`, 发现不能改变
vm2.message = 'Hello Vue World.'; // example 3
let vm3 = new Vue({
el: '#example3',
data: {
htmlValue: '<h2>Hello Vue.</h2>'
}
}); // example 4
let vm4 = new Vue({
el: '#example4',
data: {
number: 5,
ok: true,
message: 'Hello Vue.'
}
});
</script>
</body>
</html>
结果：
Vue学习（三）：数据绑定语法的更多相关文章
- day 82 Vue学习三之vue组件
Vue学习三之vue组件 本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...
- Vue入门笔记#数据绑定语法
#数据绑定语法# #文本: 数据绑定的基础表型形式,使用“Mustache”语法(双大括号)(特意查了一下Mustache同“moustache”释义为:髭:上唇的胡子,小胡子,最起码我觉得挺形象的) ...
- vue学习笔记 模板语法（三）
<div id="kk"> <div>直接输出文本:{{msg}}</div> <div>自定义过滤器输出文本:{{msg|capi ...
- day 83 Vue学习三之vue组件
本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给大家介绍一下组件(componen ...
- 三 vue学习三 从读懂一个Vue项目开始
源码地址: https://github.com/liufeiSAP/vue2-manage 我们的目录结构: 目录/文件 说明 build 项目构建(webpack)相关代码. config ...
- Vue学习三：v-on:click命令及v-html命令学习
本文为博主原创,未经允许不得转载: 第一部分: v-on:click 命令讲解及使用方法 <!DOCTYPE html> <html lang="zh"> ...
- Vue学习(三)-Vue-router路由的简单使用
一.Vue-Router环境的安装: 如果使用vue-cli脚手架搭建,项目创建过程中会提示你自否选择使用vue-router,选择使用即可, 二.路由学习 1.路由的配置 vue-cli项目自 ...
- vue学习三:生命周期钩子
生命周期钩子介绍: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生 ...
- vue 学习三 v-model 表单绑定输入 以及修饰符的用处
v-model 指定使用过vue的同学都应该是很熟悉的了,这里就不多介绍,本章主要就是记录一些v-model非常实用的修饰符和对于v-model在html文本框,多行文本框,选择框,单选框,复选框上对 ...
- Vue学习笔记-基本语法
插值文本(输出文本):{{ }}或v-textHtml(输出Html):v-html 监听属性常用于表单输入时要进行的动作watch : { dataValue:function(val) { }} ...
随机推荐
- 【luogu P2863 [USACO06JAN]牛的舞会The Cow Prom】 题解
题目链接:https://www.luogu.org/problemnew/show/P2863 求强连通分量大小>自己单个点的 #include <stack> #include ...
- 解决 Your project contains error(s)，please fix them before running your applica ..
解决 Your project contains error(s),please fix them before running your application问题 http://www.cnblo ...
- SpringBoot非官方教程 | 第十四篇：在springboot中用redis实现消息队列
转载请标明出处: 原文首发于:https://www.fangzhipeng.com/springboot/2017/07/11/springboot14-redis-mq/ 本文出自方志朋的博客 这 ...
- 优雅的QSignleton (二) MonoSingleton单例实现
MonoSingleton.cs namespace QFramework.Example { using System.Collections; using UnityEngine; class C ...
- ios学习路线—Objective-C(堆(heap)和栈(stack))
Objective-C的对象在内存中是以堆的方式分配空间的,并且堆内存是由你释放的,即release 栈由编译器管理自动释放的,在方法中(函数体)定义的变量通常是在栈内,因此如果你的变量要跨函数的话就 ...
- excel导入到java/导出到excel
package com.test.order.config; import com.test.order.domain.HavalDO; import org.apache.poi.ss.usermo ...
- Delphi中CPort控件之Timeout属性
转载:http://blog.sina.com.cn/s/blog_70146dce0102wep1.html Cport的Timeout属性定义了详细的读写超时设置. 当一个特别操作的超时时间达到了 ...
- Mysql基础3-数据操作语言DML-数据查询语言DQL
主要: 数据操作语言DML 数据查询语言DQL 数据操作语言DML DML: Data Mutipulation Language 插入数据(增) 一般插入数据形式 1)形式1: insert [in ...
- hadoop生态搭建（3节点）-06.hbase配置
# http://archive.apache.org/dist/hbase/1.2.4/ # ==================================================== ...
- 1. tty终端接收数据原理
1. 串口接收数据原理(以“ls”命令为例) (1) 每个终端设备都有一个接收缓冲区,保存原始数据.shell程序一直在休眠,等待合适的字符: (2) 串口接收到'l'字符,把它保存下来: (3) 串 ...