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|| ...
随机推荐
- JAVA--可变长参数
可变长参数: 可变长参数可以接受任意个数的实参,形参实际上是一个数组. 语法形式: 方法名称(类型 参数1,类型 参数2,类型...可变长参数) *可变长参数一定是方法的最后一个参数 public v ...
- Java静态代理和动态代理总结
静态代理 第一种实现(基于接口): 1>接口 public interface Hello { void say(String msg);} 2>目标类,至少实现一个接口 public c ...
- SQLite基础回顾
SQLite基础回顾 SQLite iOS中的数据存储方式 Plist(NSArray\NSDictionary) Preference(偏好设置\NSUserDefaults) NSCoding(N ...
- JS中函数参数和函数返回值的理解
函数本质就是功能的集合 JS中函数是对象,因此,函数名实际上仅仅是一个指向函数对象的指针,不会与某个函数绑定,所以,JS中没有重载(重载就是通过传递不同类型的参数,使两个相同函数名的函数执行不同的功能 ...
- C# 的四舍五入
c#的四舍五入有两种情况: 1.常规四舍五入 (decimal).ToString("f2") 2.四舍六入五取偶 除1里面的其他方式四舍五入都是四舍六入五取偶.
- Javascript原型链和原型继承
哇好久都没有写随笔啦,整个人都慵懒啦. 为了不让大家忘记我,把以前写过的一些慢慢发出来. 在JS 中, 有两条链子,作用域链 和 原型链. 作用域链相对容易理解,两点 - 函数限定变量作用域,就是说, ...
- Python入门教程（2）
人生苦短,我玩蛇0.0! Python(英语发音:/ˈpaɪθən/), 是一种面向对象.解释型计算机程序设计语言,由Guido van Rossum于1989年底发明,第一个公开发行版发行于1991 ...
- php写购物车(思路&源码)
本文介绍一个php实现的购物车代码,功能实现完整,具有一定的参考价值 这里我们为你提供个简单的php购物车代码,从增加购物产品与发生购买了,在商城开发中,这个功能是少不了的 具体分析如下: 对购物车里 ...
- HTML5之通信和多线程
HTML通信 跨文档消息传输 HTML5提供了在网页文档之间相互接收和发送信息的功能,使用这个功能,只要获取到网页所在窗口对象的实例,不仅同源(域+端口)的网页可以相互通信,甚至可以实现跨域通信.涉及 ...
- Bat再次小试
继<Bat小试牛刀>之后,今天又需要一个小的bat文件.需求是这样的,有一个windows服务(服务名:xxxx,进程映像名:xxxx.exe)被数据库拖慢了,但目前又没时间调整代码,所以 ...