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|| ...
随机推荐
- PAT乙级 1065. 单身狗(25) by Python
1065. 单身狗(25) 时间限制 300 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue "单身狗"是中文对 ...
- hibernate注解的简单应用
注解代替了我们用的*.hbm.xml文件.简少了我们的代码量:应用简单. @Override 用途:重写父类的同名方法 单元测试注解 @Test 用途:用于测试 @Before 用途:单测方法走之前执 ...
- Python学习--22 异步I/O
在同步IO中,线程启动一个IO操作然后就立即进入等待状态,直到IO操作完成后才醒来继续执行.而异步IO方式中,线程发送一个IO请求到内核,然后继续处理其他的事情,内核完成IO请求后,将会通知线程IO操 ...
- Azure 基础：用 PowerShell 自动发布 CloudServices
在软件的开发过程中,自动化的编译和部署能够带来很多的优势.下面我们聊聊如何自动发布云应用程序到 azure 上的 cloud services. 打包要发布的内容 首先使用 msbuild 编译 *. ...
- Java编程测试_类的使用
package test; class A { private static int i; // Static, Private Attribute private static int j; // ...
- 浅谈iOS程序员的成长和进阶
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- struts2接收参数的5种方法
以下形式中最常用的是前两种 1. 使用Action的属性: 在action 里面定义要接收的参数,并提供相应的setter,getter,和提交参数的名称一致, 并不用做数据类型的转换相应提交方式可以 ...
- RDLC系列(一)ASP.NET RDLC 报表自定义数据源
最近一段时间开发ERP系统中要用到不少报表打印,在网上找了一圈发现想些好用的报表控件大部分要收费,一些面免费要么不好用要么IE8不兼容,最后还是用了微软自带的RDLC报表,把自己遇到的坑和技巧整理分享 ...
- 使用JS实现手风琴效果
想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...
- jquery 日期获取
来自:http://blog.csdn.NET/liujun198773/article/details/7554628 感谢 $(function(){ var mydate = new Date ...