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打造PHP的AJAX表单提交实例
Nov 03 Javascript
Date对象格式化函数代码
Jul 17 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
jQuery获取页面元素绝对与相对位置的方法
Jun 10 Javascript
js遍历json的key和value的实例
Jan 22 Javascript
javascript设计模式之单体模式学习笔记
Feb 15 Javascript
基于复选框demo(分享)
Sep 27 Javascript
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
Vue-Router的使用方法
Sep 05 Javascript
为什么要使用Vuex的介绍
Jan 19 Javascript
vue-cli3配置与跨域处理方法
Aug 17 Javascript
vue的$http的get请求要加上params操作
Nov 12 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/03 冲泡冲煮
Destoon模板制作简明教程
2014/06/20 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
Valerio 发布了 Mootools
2006/09/23 Javascript
jQuery Selector选择器小结
2010/05/06 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
2017/04/20 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
产品售后服务承诺书
2014/05/21 职场文书
中队活动总结
2014/08/27 职场文书
2014年党委工作总结
2014/11/22 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
详解Anyscript开发指南绕过typescript类型检查
2022/09/23 Javascript