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|| ...
随机推荐
- CentOS 6.4 安装setuptools 和 pip
若有报错信息:setuptools Compression requires the (missing) zlib module,需执行步骤1-2(否则可忽略) 1. 安装zlib 和 zlib-de ...
- matlab中使用elseif和if嵌套的对比
% 目标: % 判定成绩等级 %定义变量 % 输入:分数grade %清除变量或指令 clc; % 允许用户输入参数 disp ('该功能练习if语句'); disp ('输入你的成绩,系统将判定等级 ...
- 二cha树
void porder(BTree *b) { BTree *St[MaxSize],*p; ; if(b!=NULL) { top++; St[top]=b; ) { p=St[top]; top- ...
- Java包装类缓存
1.基本概念 在jdk1.5及之后的版本中,Java在5大包装类中(Byte,Charactor,Short,Integer,Long)增加了相应的私有静态成员内部类为相应包装类对象提供缓存机制,In ...
- 关于RunLoop
首先我们要先认识一下这个RunLoop; NSRunLoop是Cocoa框架中的类,与之的Core Fundation 中CFRunLoopRef类. 这两者的区别是,前者不是线程安全的,而后者是线程 ...
- 从项目经理的角度看.net的MVC中Razor语法真的很垃圾.
我们知道,Razor语法中我们可以直接使用@if(){}等代码段,这使得.net程序员在写模版时更容易了. 对比如下: 语法名称 Razor 语法 Web Forms 等效语法 代码块(服务端) @{ ...
- Linux 下文件操作 shell
删除目录下的所有文件ls *.log | xargs rm -f当前目录所有文件大小的总和ll | awk '{sum += $5}; END {print sum/1048576}'将命令推送到后台 ...
- mysql 安装及卸载 主从配置
1.查询rpm -qa | grep mysql* 组件 出现类似安装包 mysql-server-5.1.71-1.el6.x86_64 mysql-libs-5.1.71-1.el6.x86_64 ...
- 【DOORS】如何基于DOORS实施需求管理
引言 IBM Rational DOORS,简称DOORS,是被业界广泛认可的需求管理工具,在国内外需求管理领域具有较高的市场占有率.需求管理作为传统的工程领域,理论发展相对成熟和健全.随着越来越多的 ...
- 不需要密码的windows计划任务设置
使用windows计划任务定时做些事情,确实非常方便,但创建任务时老是需要设置密码,否则在执行任务时会报80070005的系统错误导致任务无法执行. 有时windows没设密码或当账户修改密码就必须修 ...