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 相关文章推荐
Javascript 二维数组
Nov 26 Javascript
IE6图片加载的一个BUG解决方法
Jul 13 Javascript
JavaScript模板引擎用法实例
Jul 10 Javascript
jquery实现九宫格大转盘抽奖
Nov 13 Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
Jan 10 Javascript
Vue中的scoped实现原理及穿透方法
May 15 Javascript
JS的Ajax与后端交互数据的实例
Aug 08 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 Javascript
JavaScrip数组去重操作实例小结
Jun 20 Javascript
node实现爬虫的几种简易方式
Aug 22 Javascript
原生JS实现音乐播放器
Jan 26 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
php公用函数列表[正则]
2007/02/22 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
JavaScript 学习笔记之数据类型
2015/01/14 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
2015/04/10 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
2016/06/21 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
微信小程序云开发 生成带参小程序码流程
2019/05/18 Javascript
Vue Router的手写实现方法实现
2020/03/02 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
[02:03]风行者至宝清风环佩外观展示
2020/09/05 DOTA
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
python 合并文件的具体实例
2013/08/08 Python
全面解析Python的While循环语句的使用方法
2015/10/13 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
Django 实现图片上传和下载功能
2020/12/31 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
爷爷追悼会答谢词
2014/01/24 职场文书
2015年预备党员自我评价
2015/03/04 职场文书
PHP解决高并发问题
2021/04/01 PHP
教你快速开启Apache SkyWalking的自监控
2021/04/25 Servers
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸