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 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
Nov 13 Javascript
Jquery 动态循环输出表格具体方法
Nov 23 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 Javascript
Firefox下无法正常显示年份的解决方法
Sep 04 Javascript
Python脚本后台运行的几种方式
Mar 09 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
js密码强度实时检测代码
Mar 02 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 Javascript
uniapp实现横向滚动选择日期
Oct 21 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
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
php简单提示框alert封装函数
2010/08/08 PHP
linux实现php定时执行cron任务详解
2013/12/24 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
Opacity.js
2007/01/22 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
javascript数据类型详解
2017/02/07 Javascript
javascript中replace使用方法总结
2017/03/01 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
2021/02/15 Javascript
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
python中使用xlrd读excel使用xlwt写excel的实例代码
2018/01/31 Python
Python paramiko模块的使用示例
2018/04/11 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
python实现简易数码时钟
2021/02/19 Python
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
python怎么自定义捕获错误
2020/06/29 Python
CSS3制作hover下划线动画
2017/03/27 HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
String s = new String(“xyz”);创建了几个String Object?
2015/08/05 面试题
幼儿园大班教学反思
2014/02/10 职场文书
医院学雷锋活动策划方案
2014/02/15 职场文书
简单的大学生自我鉴定
2014/02/18 职场文书
对学校的意见和建议
2015/06/04 职场文书
法定授权委托证明书
2015/06/18 职场文书
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers