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|| ...
随机推荐
- angular实现跨域
angular.js 自带jsonp,实现跨域,下面来实搜索框的下拉列表,使用百度和360分别尝试一下 百度:url截取之后红色部分需替换 :https://sp0.baidu.com/5a1Fazu ...
- webForm系列 前端框架快速引用
Html的确定就是不能重用,MVC可以在_Layout.cshtml中将每个页面都需要的js和css文件(如jq,bootstrap等)都引用进去,webform就麻烦一点. webForm需要给所以 ...
- C# 类型和变量
C# 中的类型有两种:值类型 (value type) 和引用类型 (reference type).值类型的变量直接包含它们的数据,而引用类型的变量存储对它们的数据的引用,后者称为对象.对于引用类型 ...
- JavaScript中几个相似方法对比
一.substring与substr substring substr 概述 返回字符串两个索引之间(或到字符串末尾)的子串 返回字符串从指定位置开始到指定长度的子串 语法 参数 indexSta ...
- 如何在 Windows上编译Objective-C
Objective-C现在几乎已经变成了苹果的专利了,可以直接在苹果的Xcode上编译Objective-C程序,但是在Windows平台下的编译工具就寥寥无几了,本身这种语言用的人就不是很多.今天在 ...
- 【UWP】FFmpeg库的编译
本文是关于windows8.1/windows10通用应用下编译ffmpeg的一些需要注意的地方,针对最新的msys2而写,都是我在实际操作中遇到的,但是网上没有提到的.如果大家遇到什么问题或是在之前 ...
- 第三方库AFNetworking 3.1.0的简单使用
AFNetworking是一个 在iOS开发中 使用非常多网络开源库.它是一个轻量级的网络请求API类库. 适用于iOS以及Mac OS X.它构建于在(Apple iOS开发文档) NSURLCon ...
- WPF移动Window窗体(鼠标点击左键移动窗体自定义行为)
XAML代码部分:1.引用System.Windows.Interactivity 2.为指定的控件添加一个拖动的行为 3.很简单的了解行为的作用和用法 <Window xmlns=" ...
- mybatis系列笔记(1)---mybatis入门
mybatis入门 MyBatis是什么? MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了goog ...
- TypeScript 优秀开源项目大合集
TypeScript出来有段时间了,也冒出了很多用TypeScript开发的优秀开源项目,搜寻了一些基于TypeScript项目,分享给大家: https://github.com/brookshi/ ...