vue基础之模板和过滤器用法实例分析
本文实例讲述了vue基础之模板和过滤器用法。分享给大家供大家参考,具体如下:
一、模板
{{msg}} 数据更新模板变化
{{*msg}} 数据只绑定一次
{{{msg}}} HTML转意输出
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vue模板</title> <style> </style> <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js" async></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ msg:'abc' } }); }; </script> </head> <body> <div id="box"> <input type="text" v-model="msg"> <br> {{msg}} <br> {{*msg}} <br> {{{msg}}} </div> </body> </html>
二、过滤器
过滤器:-> 过滤模板数据
系统提供一些过滤器:
{{msg| filterA}}
{{msg| filterA | filterB}}
uppercase eg: {{'welcome'| uppercase}}
lowercase
capitalize 首字母大写
currency 钱
{{msg| filterA 参数}}{{'welcome'|uppercase}} //WELCOME
{{'WELCOME'|lowercase}} //welcome
{{'WELCOME'|lowercase|capitalize}} //Welcome
{{12|currency}} //$12.00
{{12|currency '¥'}} //¥12.00
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
希望本文所述对大家vue.js程序设计有所帮助。
相关推荐
-
详解Vue 动态添加模板的几种方法
以下方法只适用于 Vue1.0 版本,推荐系数由高到低排列. 通常我们会在组件里的 template 属性定义模板,或者是在 *.vue 文件里的 template 标签里写模板.但是有时候会需要动态生成模板的需求,例如让用户自定义组件模板,或者设置组件的布局. 例如要做一个类 select 的组件,用户传入 options 数据,通过 value prop 获取选中值,最基本的原型如下. Vue.component('XSelect', { template: ` <div class="
-
vue模板语法-插值详解
1.文本 数据绑定最常见的形式就是使用'Mustache'语法(双打括号)的文本插值: <span>message:{{msg}}</span> 使用v-once指令,也能执行一次性的插值,当主句改变时,插值处的内容不会更新. 但请留心这回影响到该节点上所有的数据绑定: <span v-once>this will nver change:{{message}}</span> 2.纯html 双打括号会将数据解释为纯文本,而非html.为了输出html可以使
-
Vue中的字符串模板的使用
1.HTML模板和字符串模板 HTML模板:直接在HTML页面挂载的模板.(即非字符串模板) 非字符串模板:在单文件里用 <template></template> 指定的模板,换句话说,写在 html 中的就是非字符串模板. 字符串模板:在js字符串中定义的模板. 2.Props属性:HTML 特性是不区分大小写的.所以,当使用的不是字符串模板时,camelCase (驼峰式命名) 的 props属性需要转换为相对应的 kebab-case (短横线分隔式命名): (1).HTM
-
Vue.js学习笔记之常用模板语法详解
本文介绍了Vue.js 常用模板语法,分享给大家,具体如下: 一.文本渲染 Vue支持动态渲染文本,即在修改属性的同时,实时渲染文本内容.同时为了提高渲染效率,也支持只渲染一次,即第一次渲染出文本后,文本内容不再跟随属性值的变化而变化. 实时渲染 <div class="row"> <h2>文本 - 实时渲染</h2> <input type="text" v-model="msg" class=&quo
-
简单谈谈Vue 模板各类数据绑定
『天下武功,唯快不破』√,这一直是对武学造诣方面的追捧,虽然对于这个丝毫不会:更是对待现实工作不懈渴求,乃至苛求.因为这已不是遁隐修行,而是职场卖命,唯有先快速解决需求,方能攫取更为充盈的时间去深究技术机理,以使臻于更强,更强而优于快,如此优良循环得以形成.言归正传,作为前端ER,一度觉得,这 Vue 的诞生,好比一柄倚天利器,其易上手,写以及运行也都很高效,十分让人爱不释手:但这易上手,倒不等于容易精通,蛮多东西都需悉心学习.练习.理解,才能运用自如. 在使用 Vue 开发过程中,那基于 Do
-
Vue.js每天必学之过滤器与自定义过滤器
基础 类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数.过滤器函数以值为参数,返回转换后的值: Vue.filter('reverse', function (value) { return value.split('').reverse().join('') }) <!-- 'abc' => 'cba' --> <span v-text="message | reverse">&
-
Vue filters过滤器的使用方法
本文实例为大家分享了Vue filters过滤器使用,供大家参考,具体内容如下 实例 先来看看一段代码理解下 html <div id="app"> {{message | filters2| filters3(true,priceCount)}} </div> js var app = new Vue({ el: "#app", data: { message: 199, priceCount:.8 }, filters:{ filters
-
Vue 过滤器filters及基本用法
1.示例代码 采用vue单文件组件,使用moment插件格式化日期 <template> <div> <h1>{{date | dateFormat}}</h1> </div> </template> <script> import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); export default { dat
-
Vue2 模板template的四种写法总结
如下所示: <div id="app"> <h1>我是直接写在构造器里的模板1</h1> </div> <template id="demo3"> <h1 style="color:red">我是选项模板3</h1> </template> <script type="x-template" id="demo4&qu
-
vue基础之模板和过滤器用法实例分析
本文实例讲述了vue基础之模板和过滤器用法.分享给大家供大家参考,具体如下: 一.模板 {{msg}} 数据更新模板变化 {{*msg}} 数据只绑定一次 {{{msg}}} HTML转意输出 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vue模板</title> <s
-
微信小程序模板和模块化用法实例分析
本文实例讲述了微信小程序模板和模块化用法.分享给大家供大家参考,具体如下: template 模板,在定义的时候使用name属性,如以下声明方式 <template name="mytemp"> <view> name:{{names}} address:{{add}} </view> </template> 模板不能直接在界面上显示,需要调用的时候才能显示出来,调用的时候需要使用is属性来说明调用的是哪个模板,并且传参的形式可以有多种
-
vue学习笔记之slot插槽用法实例分析
本文实例讲述了vue slot插槽用法.分享给大家供大家参考,具体如下: 不使用插槽,在template中用v-html解析父组件传来的带有标签的content <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js&q
-
vue基础之事件v-onclick="函数"用法示例
本文实例讲述了vue基础之事件v-onclick=函数用法.分享给大家供大家参考,具体如下: v-on:click/mouseout/mouseover/dblclick/mousedown..... 事件: v-on:click="函数" v-on:click/mouseout/mouseover/dblclick/mousedown..... new Vue({ el:'#box', data:{ //数据 arr:['apple','banana','orange','pear'
-
Python iter()函数用法实例分析
本文实例讲述了Python iter()函数用法.分享给大家供大家参考,具体如下: python中的迭代器用起来非常灵巧,不仅可以迭代序列,也可以迭代表现出序列行为的对象,例如字典的键.一个文件的行,等等. 迭代器就是有一个next()方法的对象,而不是通过索引来计数.当使用一个循环机制需要下一个项时,调用迭代器的next()方法,迭代完后引发一个StopIteration异常. 但是迭代器只能向后移动.不能回到开始.再次迭代只能创建另一个新的迭代对象. 反序迭代工具:reversed()将返回
-
Python callable()函数用法实例分析
本文实例讲述了Python callable()函数用法.分享给大家供大家参考,具体如下: python中的内建函数callable( ) ,可以检查一个对象是否是可调用的 . 对于函数, 方法, lambda 函数式, 类, 以及实现了 _ _call_ _ 方法的类实例, 它都返回 True. >>> help(callable) Help on built-in function callable in module __builtin__: callable(...) calla
-
Python lambda函数基本用法实例分析
本文实例讲述了Python lambda函数基本用法.分享给大家供大家参考,具体如下: 这里我们简单学习一下python lambda函数. 首先,看一下python lambda函数的语法,如下: f=lambda [parameter1,parameter2,--]:expression lambda语句中,冒号前是参数,可以有0个或多个,用逗号隔开,冒号右边是返回值.lambda语句构建的其实是一个函数对象. 1>无参数 f=lambda :'python lambda!' >>&
-
Java拦截器和过滤器的区别分析
一.过滤器(filter) 过滤器处于客户端与Web资源(Servlet.JSP.HTML)之间,客户端与Web资源之间的请求和响应都要通过过滤器进行过滤.举例:在过滤器中定义了禁止访问192.10.10.1这个地址,那么当客户端发出访问192.10.10.1的请求时,经过过滤器后,客户端得到的响应是出现该IP禁止访问的提示.在java web中,你传入的request,response提前过滤掉一些信息,或者提前设置一些参数,然后再传入servlet或者struts的 action进行业务逻辑
-
Tensorflow tf.tile()的用法实例分析
tf.tile()应用于需要张量扩展的场景,具体说来就是: 如果现有一个形状如[width, height]的张量,需要得到一个基于原张量的,形状如[batch_size,width,height]的张量,其中每一个batch的内容都和原张量一模一样.tf.tile使用方法如: tile( input, multiples, name=None ) import tensorflow as tf a = tf.constant([7,19]) a1 = tf.tile(a,multiples=[
-
java队列之queue用法实例分析
Queue: 基本上,一个队列就是一个先入先出(FIFO)的数据结构 Queue接口与List.Set同一级别,都是继承了Collection接口.LinkedList实现了Deque接 口. Queue的实现 1.没有实现的阻塞接口的LinkedList: 实现了java.util.Queue接口和java.util.AbstractQueue接口 内置的不阻塞队列: PriorityQueue 和 ConcurrentLinkedQueue PriorityQueue 和 Concurren
随机推荐
- .Net Core使用Socket与树莓派进行通信详解
- js实现form自动完成功能
- Java网络编程基础篇之单向通信 原创
- PHP将身份证正反面两张照片合成一张图片的代码
- 关于preg_replace函数的问题讲解
- ajax+jsp草稿自动保存的实现代码
- 遭遇 mssvc.exe svcUpdate.exe IESeven.dll DBSeven.dll病毒第1/3页
- mysql 5.7.14 下载安装、配置与使用详细教程
- jquery捕捉回车键及获取checkbox值与异步请求的方法
- Ajax加载外部页面弹出层效果实现方法
- php通过rmdir删除目录的简单用法
- jQuery实现表格行上下移动和置顶效果
- php用户登录之cookie信息安全分析
- C++ 多重继承和虚拟继承对象模型、效率分析
- 新浪刚打开页面出来的全屏广告代码
- Android自定义View实现弹性小球效果
- Java中避免写嵌套if样式的代码详解
- Java线程中start和run方法全面解析
- Android 代码JIT友好度检测工具
- Python实现将HTML转换成doc格式文件的方法示例