Vue.js中使用${}实现变量和字符串的拼接方式
更新时间：2023年07月05日 14:16:52 作者：美奇开发工作室
这篇文章主要介绍了Vue.js中使用${}实现变量和字符串的拼接方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
使用${}实现变量和字符串的拼接
第1步、在data中定义变量（我定义的是comment对象）：
<script>
export default {
data() {
return {
comment: {
name: '张三',
content: '哈哈哈，Vue.js挺好用的。'
}
}
}
}
</script>第2步、在字符串中使用${}拼接变量
<template>
<li class="list-group-item">
<div class="handle">
<a href="javascript:;" rel="external nofollow" @click="del">删除</a>
</div>
<p class="name"><span>{{comment.name}}</span><span>说:</span></p>
<p class="content">{{comment.content}}</p>
</li>
</template>
<script>
export default {
data() {
return {
comment: {
name: '张三',
content: '哈哈哈，Vue.js挺好用的。'
}
}
},
methods: {
del() {
alert(this.comment.name);
if(window.confirm(`确定要删除${this.comment.name}的评论吗？`)) {
//这里省略实现删除的方法
}
}
}
}
</script>注意了 ：window.confirm()里不是单引号，而是两个 ` 号（esc下面的按键）。
在vue中实现字符串拼接为url连接
实现思路就是利用v-bind绑定属性，就可以在href属性中利用变量拼接出url
直接通过special_url+cls拼接出url。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue基础ESLint Prettier配置教程详解，本文使用VsCode + Vue + ESLint + Prettier 实现代码格式规范 + 保存自动修复代码js+vue2022-07-07
Vue中Class和Style实现v-bind绑定的几种用法
项目开发中给元素添加/删除 class 是非常常见的行为之一， 例如网站导航都会给选中项添加一个 active 类用来区别选与未选中的样式，那么在 vue 中 我们如何处理这类的效果呢？下面我们就一起来了解一下2021-05-05
本文主要介绍了Vue如何设置el-table背景透明样式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
随着Vue3的日益成熟,越来越多的团队开始考虑将现有Vue2项目升级到Vue3,作为一次重大版本更新,Vue3在带来性能提升和新特性的同时,也引入了一些不兼容的变化,本文将全面解析Vue2到Vue3升级过程中需要注意的关键点,帮助你顺利完成迁移,需要的朋友可以参考下2025-04-04
这篇文章主要为大家介绍了ElementUI修改实现更好用图片上传预览组件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
本篇文章主要介绍了初步认识理解Vuex，Vuex就是在一个项目中，提供唯一的管理数据源的仓库,有兴趣的可以了解一下2017-04-04
文章介绍了如何在需求系统中创建一个位于页面上方的公告展示组件,展示了如何在App.vue或其他页面组件中使用这个公告组件,感兴趣的朋友一起看看吧2025-01-01
element的el-upload组件上传文件跨域问题的几种解决
跨域问题网上搜索很多,感觉情况都不一样,本文主要介绍了element的el-upload组件上传文件跨域问题的几种解决,具有一定的参考价值,感兴趣的可以了解一下2024-03-03
本篇文章主要介绍了vuejs2.0子组件改变父组件的数据实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要介绍了Vue3项目刚创建就报错的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论