Vue小白篇 -Vue 的模板语法
可以插入任何你想插入的内容,除了 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 的模板语法的更多相关文章
- Vue小白篇 - Vue介绍
Vue ?啥是Vue?能干嘛? vue 的介绍 Vue 是一套用于构建用户界面的 渐进式框架 ,与其它大型框架不同的是, Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层 前端三大框 ...
- Vue小白篇 - Vue 的指令系统 (1) v-text、v-html
v-text:相当于innerText v-html:相当于innerHTML <div id="box"> {{ msg }} <div v-text=&quo ...
- vue简介、入门、模板语法
在菜鸟教程上面学习的vue.js.同时结合vue中文文档网站,便于自己记录. vueAPI网站:API 1. 简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框 ...
- Vue基础(一)---- 模板语法
1.基本理解 Vue其实是一个渐进式JavaScript框架,封装好了一些方法,不再需要操作通过操作DOM,在相同的目标下能够更快的编写代码. 声明式渲染→组件系统→客户端路由→集中式状态管理→项目构 ...
- Vue小白篇 - ES6的语法
为什么要学 ES6 的语法呢? 因为 Vue 语法有很多都是 ES6(ECMAScript 6),这里推荐 [阮一峰 ECMAScript 6 入门]: http://es6.ruanyifeng.c ...
- vue基础篇---vue组件《2》
定义全局组件 我们通过Vue的component方法来定义一个全局组件. <div id="app"> <!--使用定义好的全局组件--> <coun ...
- vue基础篇---vue组件
vue模块第一篇,因为公司马上要用到这vue开发.早就想好好看看vue了.只有实际工作中用到才会进步最快.vue其他的简单指令就不多讲了,没啥意思,网上一大堆.看w3c就ok. 组件这个我个人感觉坑蛮 ...
- 前端框架VUE——数据绑定及模板语法
一.数据绑定 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统: <div id="app"> {{ msg }} </di ...
- VUE:模板语法(小白自学)
VUE:模板语法 一:何为声明式 安装规定的语法,去实现一些效果(不需要管流程). 二:模板语法 <!DOCTYPE html> <html> <head> < ...
随机推荐
- psfstriptable - 从控制台字体中移走嵌入的Uniocde字符表
总览 psfstriptable 字体文件 [输出文件] 描述 psfstriptable 命令从 字体文件 或者标准输入(此时的 字体文件 是单个破折号(-))读取一个可能含有嵌入Unicode字体 ...
- shortcut to add throws declaration in Intellij Idea
When a piece of code needs error handling, IntelliJ underlines it with red. Set your pointer on that ...
- 第三节:MySQL的调控按钮——启动选项和系统变量
一.命令行上使用启动选项 启动选项的通用格式 --启动选项1[=值1] --启动选项2[=值2] ... --启动选项n[=值n] 禁止TCP/IP链接 略 修改MySQL服务的默认存储引 ...
- java 字符串常量池
- 解决js ajax跨越请求 Access control allow origin 异常
// 解决跨越请求的问题 response.setHeader("Access-Control-Allow-Origin", "*");
- hdu4336 Card Collector MinMax 容斥
题目传送门 https://vjudge.net/problem/HDU-4336 http://acm.hdu.edu.cn/showproblem.php?pid=4336 题解 minmax 容 ...
- Ubuntu18.04 安装 Idea 2018.2
https://blog.csdn.net/weixx3/article/details/81136822 Ubuntu18.04 安装 Idea 2018.2环境信息:OS:Ubuntu18.04J ...
- 16_3.jdk动态代理与aop
jdk动态代理: public interface Subject { void say(String name,int age); } public class RealSubject implem ...
- MySQL使用版本号实现乐观锁
原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11608581.html 乐观锁适用于读多写少的应用场景 乐观锁Version图示 Project D ...
- python学习笔记(四)字符串及字符串操作
字符串 字符串可以存任意类型的字符串,比如名字,一句话等等. 字符串还有很多内置方法,对字符串进行操作,常用的方法如下: name1='hello world' print(name.capitali ...