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 相关文章推荐
js中的string.format函数代码
Aug 11 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
Nov 06 Javascript
jquery easyui中treegrid用法的简单实例
Feb 18 Javascript
js关于命名空间的函数实例
Feb 05 Javascript
使用jQuery实现更改默认alert框体
Apr 13 Javascript
Web开发必知Javascript技巧大全
Feb 23 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
Aug 24 Javascript
浅谈AngularJs指令之scope属性详解
Oct 24 Javascript
JS SetInterval 代码实现页面轮询
Aug 11 Javascript
Vue 全局loading组件实例详解
May 29 Javascript
JavaScript中的事件与异常捕获详析
Feb 24 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 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
超外差式晶体管收音机的组装与统调
2021/03/01 无线电
十天学会php之第八天
2006/10/09 PHP
用PHP来写记数器(详细介绍)
2006/10/09 PHP
PHP 调试工具Debug Tools
2011/04/30 PHP
php实现网站顶踩功能的完整前端代码
2015/07/19 PHP
Yii快速入门经典教程
2015/12/28 PHP
php实现的http请求封装示例
2016/11/08 PHP
php 解决扫描二维码下载跳转问题
2017/01/13 PHP
分析php://output和php://stdout的区别
2018/05/06 PHP
js form action动态修改方法
2008/11/04 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
2012/02/13 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python实现划词翻译
2020/04/23 Python
python根据时间生成mongodb的ObjectId的方法
2015/03/13 Python
Python列出一个文件夹及其子目录的所有文件
2016/06/30 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
对Python发送带header的http请求方法详解
2019/01/02 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
努比亚手机官网:nubia
2016/10/06 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
英文版餐饮业求职信
2013/10/18 职场文书
影视制作岗位职责
2013/12/04 职场文书
艺术设计专业个人求职信范文
2013/12/11 职场文书
清华大学自主招生自荐信
2014/01/29 职场文书
创先争优个人承诺书
2014/08/30 职场文书
班主任寄语2015
2015/02/26 职场文书
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技