vue语法之拼接字符串的示例代码


Posted in Javascript onOctober 25, 2017

本文介绍了vue语法之拼接字符串的示例代码,分享给大家,具体如下。

先来一行代码:

<div class="swiper-slide" v-for="item in message">
<img v-bind:src="['xxx(需要拼接的字符串)'+item.picurl]" alt="" width="100%" height="245" />
</div>

如代码所示,只需要在数组语法中拼接字符串即可。

***知识点***

顺便总结一下vue语法

写法也分为:style的绑定和class的绑定

(以下代码部分为官网例子)

(1)对象语法

顾名思义,就是有使用对象写法的语法

style绑定:

vue语法之拼接字符串的示例代码

这类写法和css写法类似

class绑定:

vue语法之拼接字符串的示例代码

active是类名,isActive为true的时候active有效

(2)数组语法

style绑定:

<div :style="[style1,style2,style3]"></div>

data写法官网没介绍,我这边简单写一下例子:

data: {
  style1:{background:'red'},
  style2:{width:'100px'},
  style3:{height:'100px'}
 }

class绑定:

vue语法之拼接字符串的示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js网页侧边随页面滚动广告效果实现
Apr 14 Javascript
Javascript Throttle &amp; Debounce应用介绍
Mar 19 Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
在JavaScript中处理时间之getHours()方法的使用
Jun 10 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
Mar 06 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
Dec 26 Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 Javascript
JavaScript实现指定数量的并发限制的示例代码
Mar 10 Javascript
JS实现前端动态分页码代码实例
Jun 02 Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 #Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 #Javascript
浅谈Node.js之异步流控制
Oct 25 #Javascript
AngularJS 实现购物车全选反选功能
Oct 24 #Javascript
React Native时间转换格式工具类分享
Oct 24 #Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
Oct 24 #Javascript
React Native AsyncStorage本地存储工具类
Oct 24 #Javascript
You might like
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
高效的表格行背景隔行变色及选定高亮的JS代码
2010/12/04 Javascript
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
xmlhttp缓存清除的2种解决方法
2013/12/13 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
2015/12/02 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
AngularJS Select(选择框)使用详解
2017/01/18 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
基于node.js之调试器详解
2017/08/22 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
python Django模板的使用方法
2016/01/14 Python
使用matplotlib绘制图例标签中带有公式的图
2019/12/13 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
python学习将数据写入文件并保存方法
2020/06/07 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
介绍一下Python中webbrowser的用法
2013/05/07 面试题
保密承诺书范文
2014/03/27 职场文书
《画风》教学反思
2014/04/16 职场文书
质量安全标语
2014/06/07 职场文书
医院安全生产月活动总结
2014/07/05 职场文书
春节超市活动方案
2014/08/14 职场文书
神州牡丹园的导游词
2019/11/20 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript