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基于Element构建自定义树的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
本文主要介绍了vue-cli5关于yarn的一个小坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
这篇文章主要介绍了vue（2.x，3.0）配置跨域代理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要为大家介绍了极度舒适的Vue弹窗Dialog最佳使用方案实战,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
Vue + element实现动态显示后台数据到options的操作方法
最近遇到一个需求需要实现selector选择器中选项值options 数据的动态显示，而非写死的数据，本文通过实例代码给大家分享实现方法，感兴趣的朋友一起看看吧2021-07-07
vue element 中的table动态渲染实现（动态表头）
这篇文章主要介绍了vue element 中的table动态渲染实现（动态表头），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
vuex是一个专为vue.js应用程序开发的 状态管理模式,它采用集中式存储管理应用的所有的状态,并以相应的规则保证状态以一种可预测的方式发生变化,这篇文章主要给大家介绍了关于vue入门之vuex安装与使用的相关资料,需要的朋友可以参考下2021-08-08
骨架屏就是在页面未渲染完成的时候，先用一些简单的图形大致勾勒出页面的基本轮廓，给用户带来更好的体验。这篇文章主要介绍了vue 移动端注入骨架屏,需要的朋友可以参考下2019-06-06
这篇文章主要为大家详细介绍了Vue图片放大镜组件的封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了vue与electron实现进程间的通信详情，本文主要介绍electron渲染进程和主进程间的通信，以及在渲染进程和主进程中常用的配置项，需要的朋友可以参考一下2022-09-09
最新评论