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 相关文章推荐
动态表格Table类的实现
Aug 26 Javascript
Jquery倒计时源码分享
May 16 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
JS检测是否可以访问公网服务器功能代码
Jun 19 Javascript
Mongoose实现虚拟字段查询的方法详解
Aug 15 Javascript
vue webuploader 文件上传组件开发
Sep 23 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 Javascript
详解Vue 单文件组件的三种写法
Feb 19 Javascript
vue 封装 Adminlte3组件的实现
Mar 18 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
Oct 16 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恢复数组的key为数字序列的方法
2015/04/28 PHP
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
理解JS事件循环
2016/01/07 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
详解如何用typescript开发koa2的二三事
2018/11/13 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
vue 数据操作相关总结
2020/12/17 Vue.js
学习python (2)
2006/10/31 Python
pyv8学习python和javascript变量进行交互
2013/12/04 Python
Python日志模块logging简介
2015/04/13 Python
python出现&quot;IndentationError: unexpected indent&quot;错误解决办法
2017/10/15 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
python FTP编程基础入门
2021/02/27 Python
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
财务支持类个人的自我评价
2014/02/14 职场文书
《雾凇》教学反思
2014/02/17 职场文书
高中军训感言600字
2014/03/11 职场文书
银行纠风工作实施方案
2014/06/08 职场文书
2015年新教师工作总结
2015/04/28 职场文书
运动会通讯稿50字
2015/07/20 职场文书
使用Canvas绘制一个游戏人物属性图
2022/03/25 Javascript
Android Rxjava3 使用场景详解
2022/04/07 Java/Android
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技