可以插入任何你想插入的内容,除了 if-else if-else用三元运算符代替

<div id="box">
<!--模板语法-->
<h2>{{ msg }}</h2>
<h3>{{ 'hello world' }}</h3> <!--带引号的 是写死的-->
<h3>{{ 1+1 }}</h3> <!--可以运算-->
<h3>{{ {'name':'tom'} }}</h3> <!--可以插对象-->
<h5>{{ person.name }}</h5>
<h2>{{ 1>2 ? '真的':'假的' }}</h2> <!--三元运算符--> <!--输入euV olleh"-->
<p>{{ msg2.split('').reverse().join() }}</p>
</div> <script>
// 2、实例化对象
new Vue({
el:'#box',
data:{
msg: 'hello',
person:{
name: 'tom',
},
msg2: 'hello Vue',
text: '<h2>好嗨哟</h2>'
}
});
</script>

Vue小白篇 -Vue 的模板语法的更多相关文章

  1. Vue小白篇 - Vue介绍

    Vue ?啥是Vue?能干嘛? vue 的介绍 Vue 是一套用于构建用户界面的 渐进式框架 ,与其它大型框架不同的是, Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层 前端三大框 ...

  2. Vue小白篇 - Vue 的指令系统 (1) v-text、v-html

    v-text:相当于innerText v-html:相当于innerHTML <div id="box"> {{ msg }} <div v-text=&quo ...

  3. vue简介、入门、模板语法

    在菜鸟教程上面学习的vue.js.同时结合vue中文文档网站,便于自己记录. vueAPI网站:API 1. 简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框 ...

  4. Vue基础(一)---- 模板语法

    1.基本理解 Vue其实是一个渐进式JavaScript框架,封装好了一些方法,不再需要操作通过操作DOM,在相同的目标下能够更快的编写代码. 声明式渲染→组件系统→客户端路由→集中式状态管理→项目构 ...

  5. Vue小白篇 - ES6的语法

    为什么要学 ES6 的语法呢? 因为 Vue 语法有很多都是 ES6(ECMAScript 6),这里推荐 [阮一峰 ECMAScript 6 入门]: http://es6.ruanyifeng.c ...

  6. vue基础篇---vue组件《2》

    定义全局组件 我们通过Vue的component方法来定义一个全局组件. <div id="app"> <!--使用定义好的全局组件--> <coun ...

  7. vue基础篇---vue组件

    vue模块第一篇,因为公司马上要用到这vue开发.早就想好好看看vue了.只有实际工作中用到才会进步最快.vue其他的简单指令就不多讲了,没啥意思,网上一大堆.看w3c就ok. 组件这个我个人感觉坑蛮 ...

  8. 前端框架VUE——数据绑定及模板语法

    一.数据绑定 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统: <div id="app"> {{ msg }} </di ...

  9. VUE:模板语法(小白自学)

    VUE:模板语法 一:何为声明式 安装规定的语法,去实现一些效果(不需要管流程). 二:模板语法 <!DOCTYPE html> <html> <head> < ...

随机推荐

  1. day20 python异常处理 try except

    day20 python   一.异常处理     1.什么是异常, 常见异常有:         逻辑错误 ''' name Traceback (most recent call last):   ...

  2. 【串线篇】spring boot配置文件大全【上】

    一.配置文件 SpringBoot使用一个全局的配置文件,配置文件名是固定的: • application.properties • application.yml 配置文件的作用:修改SpringB ...

  3. 网络编程和并发:1.简述 OSI 七层协议

    1. 概念 Open System Interconnection : 开放互联系统 2. 图示 注:图片来源:https://www.cnblogs.com/maybe2030/p/4781555. ...

  4. Linux命令行工具之free命令

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11524691.html 使用 free 查看整个系统的内存使用情况 Note:不同版本的free输出可 ...

  5. mysql Got a packet bigger than 'max_allowed_packet' bytes

    背景 数据库备份执行SQL文件时,执行到图片表插入图片数据时错误: 错误提示:Got a packet bigger than 'max_allowed_packet' bytes 原因分析及解决 m ...

  6. 【转】从phpMyAdmin批量导入Excel内容到MySQL(亲测非常简洁有效)

    今天做项目遇到需要用phpMyAdmin批量导入Excel内容到MySQL数据库.分析了我的踏坑经历并且总结一最便捷的一套导入数据的方法,非常实用简洁: 1.修改Excel表的数据,使得Excel中的 ...

  7. sqlserver 中的时间算法

    DECLARE @Date DATETIME SET @Date=GETDATE() --前一天,给定日期的前一天 ,@Date) AS '前一天' --后一天,给定日期的后一天 ,@Date) AS ...

  8. php htmlspecialchars()函数 语法

    php htmlspecialchars()函数 语法 作用:函数把预定义的字符转换为 HTML 实体.预定义的字符有:& (和号)成为 &," (双引号)成为 " ...

  9. 【CF1257B】Magic Stick【思维】

    题意:每次可以对a进行两种操作,1:如果是偶数,则变成3*a/2:2:变成a-1 显然当a=1时,b只能为1 a=2或3时,b只能为123 a>3时,b可以为任意数 代码: #include&l ...

  10. [CSP-S模拟测试]:画作(BFS+数学)

    题目描述 小$G$的喜欢作画,尤其喜欢仅使用黑白两色作画.画作可以抽象成一个$r\times c$大小的$01$矩阵.现在小$G$构思好了了他的画作,准备动笔开始作画.初始时画布是全白的,他每一次下笔 ...