vuejs模板使用方法
vuejs的模板功能很强大，下面是一些demo
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="https://unpkg.com/vue@2.2.2/dist/vue.js"></script>
</head> <body>
<div id="app" v-html="htmlDemo"></div>
<div id="app1" :id="idDemo">属性</div>
<div id="app2">{{msg}}</div>
<button id="app3" :disabled="bool">button</button>
<div id="app4">{{number + 1}}</div>
<div id="app5">{{bool ? 'ok' : 'no'}}</div>
<div id="app6" :id="'list-' + idNum"></div>
<div id="app7" v-bind:id="rawId | formatId">过滤器</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
htmlDemo: '<span>hello vue</span>'
}
});
var app1 = new Vue({
el: '#app1',
data: {
idDemo: 'myId'
}
});
var app2 = new Vue({
el: '#app2',
data: {
msg: '这里只能是字符串'
}
});
var app3 = new Vue({
el: '#app3',
data: {
bool: false
}
});
var app4 = new Vue({
el: '#app4',
data: {
// number: '1'
number: 1
}
});
var app5 = new Vue({
el: '#app5',
data: {
bool: true
}
});
var app6 = new Vue({
el: '#app6',
data: {
idNum: 2
}
});
var app7 = new Vue({
el: '#app7',
data: {
rawId: 'demo'
},
filters: {
formatId: function(value) {
if (!value) {
return ''
};
value = value.toString().toUpperCase();
return value;
}
}
});
</script>
</body> </html>
vuejs模板使用方法的更多相关文章
- halcon三种模板匹配方法
halcon有三种模板匹配方法:即Component-Based.Gray-Value-Based.Shaped_based,分别是基于组件(或成分.元素)的匹配,基于灰度值的匹配和基于形状的匹配,此 ...
- thinkphp二维数组模板输出方法
thinkphp二维数组模板输出方法 先写个记录,有空再整理发上来
- AndroidStudio旧模板使用方法
***AndroidStudio旧模板使用方法*** 解压后用BlankActivity文件夹替换AndroidStudio安装目录下plugins\android\lib\templates\act ...
- JDBCTemplate与模板设计方法(二)
前言:上一篇博客介绍了模板方法模式,并且给出了一个小demo,简单对模板方法进行了实现,接下来我们把目光转向spring的源码JDBCTemplate,看一看spring是如何对jdbc进行高度封装的 ...
- 基于HALCON的模板匹配方法总结
注:很抱歉,忘记从转载链接了,作者莫怪.... 基于HALCON的模板匹配方法总结 很早就想总结一下前段时间学习HALCON的心得,但由于其他的事情总是抽不出时间.去年有过一段时间的集中学习,做了许多 ...
- IDEA中设置注释模板的方法
IDEA中设置注释模板主要分为两个部分,分别是创建java文件时类的注释和方法的注释. 这里为大家详细介绍一下方法,按MyEclipse的风格设置(MyEclipse的请看:MyEclipse中设置注 ...
- ASP.NET MVC环境下实现一个网站多个网站模板的方法
asp.net mvc下实现多个网站模板的方法,让ASP.NET一个网站有多套网站模板,不用的场景下使用不用的mvc 模版. 比如有默认,红,蓝,绿几种网站模板,客户可以根据自己喜好选择自己喜欢的网 ...
- Cannot+use+T4+templates+inside+a+.NET+Core+project,NetCore2.0无法使用T4模板解决方法
Cannot+use+T4+templates+inside+a+.NET+Core+project,NetCore2.0无法使用T4模板解决方法 请见:https://csharp.wekeepco ...
- 一种简单快速的模板解析方法，活用with javascript版
//一种简单快速的模板解析方法,活用with var parseTpl = function( str, data ) { var tmpl = 'var __p=[];' + 'with(obj|| ...
随机推荐
- Swift 学习有用的学习链接（此贴随学习的深入会一直更新）
Swift 字符串相关学习推荐下面这个链接内容 一: http://www.jianshu.com/p/52e7580166ff (里面详细的介绍了2.0 和 2.0之前 的版本的一些不同的处) 二 ...
- 细说Asp.Net WebAPI消息处理管道
我们在开发完Asp.Net WebAPI程序后,可以使用WebHost寄宿方式或者SelfHost寄宿方式来部署Asp.Net WebAPI.所谓WebHost寄宿就是通过Asp.Net来实现:所谓S ...
- php微信网页授权获取用户信息
配置回调域名: 1. 引导用户进入授权页面同意授权,获取code 2. 通过code换取网页授权access_token(与基础支持中的access_token不同) 3. 如果需要,开发者可以刷新网 ...
- Matlab中plot函数全功能解析
Matlab中plot函数全功能解析 功能 二维曲线绘图 语法 plot(Y)plot(X1,Y1,...)plot(X1,Y1,LineSpec,...)plot(...,'PropertyName ...
- synchronized和lock比较浅析
synchronized是基于jvm底层实现的数据同步,lock是基于Java编写,主要通过硬件依赖CPU指令实现数据同步.下面一一介绍 一.synchronized的实现方案 1.synchroni ...
- 关于RunLoop
首先我们要先认识一下这个RunLoop; NSRunLoop是Cocoa框架中的类,与之的Core Fundation 中CFRunLoopRef类. 这两者的区别是,前者不是线程安全的,而后者是线程 ...
- Java虚拟机学习 - 垃圾收集器
HotSpot JVM收集器 上面有7中收集器,分为两块,上面为新生代收集器,下面是老年代收集器.如果两个收集器之间存在连线,就说明它们可以搭配使用. Serial(串行GC)收集器 Serial收集 ...
- 部署lamp
- 2016: [Usaco2010]Chocolate Eating
2016: [Usaco2010]Chocolate Eating Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 224 Solved: 87[Su ...
- loadrunner：判断是否服务器连接池瓶颈
分析Web Resources中的Connections per second可以判断是否服务器连接池瓶颈. connections per second会给出两种不同状态的连接数:中断的连接和新建的 ...