vue语法之拼接字符串的示例代码
2019/6/27 20:36:08
本文主要是介绍vue语法之拼接字符串的示例代码,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
本文介绍了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绑定:
这类写法和css写法类似
class绑定:
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语法之拼接字符串的示例代码的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-26怎么使用 nvm(Node Version Manager)下载并安装指定版本的 Node.js?-icode9专业技术文章分享
- 2024-11-26Vue CLI资料入门教程
- 2024-11-26Vue CLI资料入门教程
- 2024-11-26Vue3+Vite资料:新手入门教程详解
- 2024-11-26Vue3阿里系UI组件资料入门教程
- 2024-11-26Vue3的阿里系UI组件资料入门指南
- 2024-11-26Vue3公共组件资料详解与实战教程
- 2024-11-26Vue3公共组件资料详解与实战教程
- 2024-11-26Vue3核心功能响应式变量资料入门教程
- 2024-11-26Vue3核心功能响应式变量资料详解