<!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学习（三）：数据绑定语法的更多相关文章

  1. day 82 Vue学习三之vue组件

      Vue学习三之vue组件   本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...

  2. Vue入门笔记#数据绑定语法

    #数据绑定语法# #文本: 数据绑定的基础表型形式,使用“Mustache”语法(双大括号)(特意查了一下Mustache同“moustache”释义为:髭:上唇的胡子,小胡子,最起码我觉得挺形象的) ...

  3. vue学习笔记 模板语法（三）

    <div id="kk"> <div>直接输出文本:{{msg}}</div> <div>自定义过滤器输出文本:{{msg|capi ...

  4. day 83 Vue学习三之vue组件

    本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给大家介绍一下组件(componen ...

  5. 三 vue学习三 从读懂一个Vue项目开始

    源码地址:     https://github.com/liufeiSAP/vue2-manage 我们的目录结构: 目录/文件 说明 build 项目构建(webpack)相关代码. config ...

  6. Vue学习三：v-on:click命令及v-html命令学习

    本文为博主原创,未经允许不得转载: 第一部分: v-on:click 命令讲解及使用方法 <!DOCTYPE html> <html lang="zh"> ...

  7. Vue学习(三)-Vue-router路由的简单使用

    一.Vue-Router环境的安装: 如果使用vue-cli脚手架搭建,项目创建过程中会提示你自否选择使用vue-router,选择使用即可, 二.路由学习 1.路由的配置    vue-cli项目自 ...

  8. vue学习三:生命周期钩子

    生命周期钩子介绍: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生 ...

  9. vue 学习三 v-model 表单绑定输入 以及修饰符的用处

    v-model 指定使用过vue的同学都应该是很熟悉的了,这里就不多介绍,本章主要就是记录一些v-model非常实用的修饰符和对于v-model在html文本框,多行文本框,选择框,单选框,复选框上对 ...

  10. Vue学习笔记-基本语法

    插值文本(输出文本):{{ }}或v-textHtml(输出Html):v-html 监听属性常用于表单输入时要进行的动作watch : { dataValue:function(val) { }} ...

随机推荐

  1. PHP面试题分享与答案

    由于之前的每一个问题都是一个比较大的知识点,作者希望可以尽量一一详细解答,如果有不足的地方欢迎大家补充和修改,同时借鉴牛人写的Mysql中算法的实现以及内存原理,Btree结构等. 1:MySQL数据 ...

  2. MYSQL5.7.15安装步骤

    下载完成之后双击安装: 接下来一路next (出现的问题) 在我第一次安装myslq过程中,上图中的mysql server failed ,这是因为电脑环境需要升级一个插件,Visual C++ 2 ...

  3. code First 四

    先从现有数据库获取代码:  我们创建模型的时候选择Code First就可以了 public ModelStudent() : base("name=ModelStudent") ...

  4. <head> 中的 JavaScript 函数

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  5. #leetcode刷题之路3-无重复字符的最长子串

    给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度. 示例 1:输入: "abcabcbb"输出: 3 解释: 因为无重复字符的最长子串是 "abc" ...

  6. Redis4.0新特性

    redis 4.0 新特性 Redis 4.0在2017年7月发布为GA.包含几个重大改进:更好的复制(PSYNC2),线程DEL / FLUSH,混合RDB + AOF格式,活动内存碎片整理,内存使 ...

  7. python实现简单决策树（信息增益）——基于周志华的西瓜书数据

    数据集如下: 色泽 根蒂 敲声 纹理 脐部 触感 好瓜 青绿 蜷缩 浊响 清晰 凹陷 硬滑 是 乌黑 蜷缩 沉闷 清晰 凹陷 硬滑 是 乌黑 蜷缩 浊响 清晰 凹陷 硬滑 是 青绿 蜷缩 沉闷 清晰 ...

  8. 让图片在div盒子中水平垂直居中

    //调整多张图片,让图片水平垂直居中 function adjustImg(){ let imgDiv = document.getElementsByClassName("img" ...

  9. django环境搭建和学习

    由于服务器down了好几天,前几天做的django的project全都在上面,无法继续开展工作,所以决定在本地重新部署一套virtualenv 之前没有好好整理过部署过程(其实也不难),所以决定写个随 ...

  10. 吐血分享：QQ群霸屏技术教程2017（活跃篇）

    热门词的群排名,在前期优化准备充分的情况下,活跃度不失为必杀技. 在<吐血分享:QQ群霸屏技术(初级篇)>中,我们提及到热门词的群排名,有了前面的基础,我们就可以进入深度优化,实现绝对的霸 ...