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 相关文章推荐
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
淘宝搜索框效果实现分析
Mar 05 Javascript
js 页面元素的几个用法总结
Nov 18 Javascript
js操作iframe父子窗体示例
May 22 Javascript
微信小程序  简单实例(阅读器)的实例开发
Sep 29 Javascript
Vue.Js中的$watch()方法总结
Mar 23 Javascript
vue子父组件通信的实现代码
Jul 09 Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 10 Javascript
jquery css实现流程进度条
Mar 26 jQuery
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
Jul 11 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
浅谈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+mysql实现的二级联动菜单效果详解
2016/05/10 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
JS实现兼容性较好的随屏滚动效果
2015/11/09 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
小程序实现搜索框
2020/06/19 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
Python中使用Flask、MongoDB搭建简易图片服务器
2015/02/04 Python
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
PyQt5根据控件Id获取控件对象的方法
2019/06/25 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
python 实现多线程下载视频的代码
2019/11/15 Python
WxPython实现无边框界面
2019/11/18 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
python实现图片转字符画
2021/02/19 Python
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
Charles & Colvard官网:美国莫桑石品牌
2019/06/05 全球购物
Java语言程序设计测试题选择题部分
2014/04/03 面试题
医学专业毕业生个人的求职信
2013/12/04 职场文书
给医务人员表扬信
2014/01/12 职场文书
时尚休闲吧创业计划书
2014/01/25 职场文书
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
小学科学教学计划
2015/01/21 职场文书
大学生入党自荐书
2015/03/05 职场文书
css height属性中的calc方法详解
2021/06/03 HTML / CSS