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 相关文章推荐
jQuery+CSS 实现的超Sexy下拉菜单
Jan 17 Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 Javascript
node.js中的events.emitter.listeners方法使用说明
Dec 10 Javascript
jQuery中siblings()方法用法实例
Jan 08 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
浅谈js中的三种继承方式及其优缺点
Aug 10 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
JS 组件系列之BootstrapTable的treegrid功能
Jun 16 Javascript
对angular4子路由&amp;辅助路由详解
Oct 09 Javascript
微信小程序绑定手机号获取验证码功能
Oct 22 Javascript
javascript实现异形滚动轮播
Nov 28 Javascript
JS实现扫雷项目总结
May 19 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
TP5框架安全机制实例分析
2020/04/05 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
即将发布的jQuery 3 有哪些新特性
2016/04/14 Javascript
URL中“#” “?” &amp;“”号的作用浅析
2017/02/04 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
JavaScript中的遍历详解(多种遍历)
2017/04/07 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
react-router 路由切换动画的实现示例
2018/12/03 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
Python装饰器基础详解
2016/03/09 Python
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
Python基于高斯消元法计算线性方程组示例
2018/01/17 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
详解python中的数据类型和控制流
2019/08/08 Python
Pytorch to(device)用法
2020/01/08 Python
python3将变量输入的简单实例
2020/08/19 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
使用Python封装excel操作指南
2021/01/29 Python
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
上课说话检讨书
2015/01/27 职场文书
关于长城的导游词
2015/01/30 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
校运会宣传稿大全
2015/07/23 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
js基础语法与maven项目配置教程案例
2021/07/15 Javascript
教你部署vue项目到docker
2022/04/05 Vue.js
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js
浅谈Node的内存泄露问题
2022/05/06 NodeJs
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL