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 相关文章推荐
JavaScript 动态将数字金额转化为中文大写金额
May 14 Javascript
js实现获取当前时间是本月第几周的方法
Aug 11 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
Sep 06 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 Javascript
浅谈node中的exports与module.exports的关系
Aug 01 Javascript
jquery实现倒计时小应用
Sep 19 jQuery
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
May 16 Javascript
Vue组件间数据传递的方式(3种)
Jul 13 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+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
php实现快速排序法函数代码
2012/08/27 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
JS不能跨域借助jquery获取IP地址的方法
2014/08/20 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
jquery显示隐藏元素的实现代码
2016/05/19 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
2018/07/26 Javascript
JavaScript实现美化滑块效果
2019/05/17 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
python网页请求urllib2模块简单封装代码
2014/02/07 Python
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
python 3.5实现检测路由器流量并写入txt的方法实例
2017/12/17 Python
Python输出各行命令详解
2018/02/01 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
基于tensorflow for循环 while循环案例
2020/06/30 Python
Python 3.10 的首个 PEP 诞生,内置类型 zip() 迎来新特性(推荐)
2020/07/03 Python
python list等分并从等分的子集中随机选取一个数
2020/11/16 Python
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
通信工程毕业生自荐信
2013/11/01 职场文书
中学生逃课检讨书
2015/02/17 职场文书
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL
html中显示特殊符号(附带特殊字符对应表)
2021/06/21 HTML / CSS
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript
使用refresh_token实现无感刷新页面
2022/04/26 Javascript