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 相关文章推荐
zShowBox 图片放大展示jquery版 兼容性
Sep 24 Javascript
JavaScript之引用类型介绍
Aug 10 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
jQuery学习笔记之总体架构
Jun 03 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
解决jQuery使用JSONP时产生的错误
Dec 02 Javascript
javascript如何定义对象数组
Jun 07 Javascript
javascript实现滚动效果的数字时钟实例
Jul 21 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
vue数据初始化initState的实例详解
Apr 11 Javascript
vue router 用户登陆功能的实例代码
Apr 24 Javascript
JavaScript Canvas编写炫彩的网页时钟
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.MVC的模板标签系统(五)
2006/09/05 PHP
第二节 对象模型 [2]
2006/10/09 PHP
一个PHP模板,主要想体现一下思路
2006/12/25 PHP
PHP中如何实现常用邮箱的基本判断
2014/01/07 PHP
php多文件上传下载示例分享
2014/02/20 PHP
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
PHP载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
2016/11/14 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
前端jquery部分很精彩
2016/05/03 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
浅谈Vue.js
2017/03/02 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
2019/05/27 Javascript
JS 数组和对象的深拷贝操作示例
2020/06/06 Javascript
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
Python中如何引入第三方模块
2020/05/27 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
Python 实现进度条的六种方式
2021/01/06 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
试用期员工工作自我评价
2014/09/10 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
python 实现体质指数BMI计算
2021/05/26 Python