可以插入任何你想插入的内容,除了 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. Intellij IDEA插件

    1.lombok 通过注解的形式生成GET/SET等方法 2.FindBugs-IDEA 检测代码中可能的bug及不规范的位置 3.Maven Helper 一键查看maven依赖,查看冲突的依赖,一 ...

  2. Hibernate与 MyBatis的区别

    第一章     Hibernate与MyBatis Hibernate 是当前最流行的O/R mapping框架,它出身于sf.net,现在已经成为Jboss的一部分. Mybatis 是另外一种优秀 ...

  3. gradlew compileDebug --stacktrace -info

    gradlew compileDebug --stacktrace -info 在命令行中进入项目的根目录,或者可以在Android studio的Terminal中直接操作也可以,然后敲入一个命令: ...

  4. 第四章 走进jVM

    4.1字节码 java文件编译成字节码后由默认解释执行,热点代码编译执行.方法调用到一定程度的时候,进行JIT编译成机器码执行,后面直接运行JIT编译结果(机器码). 4.2类加载过程 加载链接初始化 ...

  5. ForkJoin简单示例

    import java.util.concurrent.ExecutionException; import java.util.concurrent.ForkJoinPool; import jav ...

  6. bzoj5047 [Lydsy1709月赛]空间传送装置 最短路

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=5047 题解 题目中没有说可以停留在一个点等待.问了别人才知道停留是可以的. 那么既然停留是可以 ...

  7. ARC096E Everything on It 容斥原理

    题目传送门 https://atcoder.jp/contests/arc096/tasks/arc096_c 题解 考虑容斥,问题转化为求至少有 \(i\) 个数出现不高于 \(1\) 次. 那么我 ...

  8. [Luogu1821][USACO07FEB]银牛派对Silver Cow Party

    由题意可知,我们需要求的是很多个点到同一个店的最短距离,然后再求同一个点到很多个点的最短距离. 对于后者我们很好解决,就是很经典的单源最短路径,跑一边dijkstra或者SPFA即可. 然而对于前者, ...

  9. js中给数组添加元素的方法有哪些

    unshift:将参数添加到原数组开头,并返回数组的长度 pop:删除原数组最后一项,并返回删除元素的值:如果数组为空则返回undefined push:将参数添加到原数组末尾,并返回数组的长度 co ...

  10. QTP笔记--检查点、ChildObjects方法

    一.自带检查点函数 '最后一个参数为timeout,单位是毫秒 Browser( "SAP NetWeaver Portal" ).Page( "SAP NetWeave ...