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。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue2.x中利用@font-size引入字体图标报错的解决方法
今天小编就为大家分享一篇Vue2.x中利用@font-size引入字体图标报错的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了如何利用Vue和Echarts实现基本K线图的绘制，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下2023-03-03
Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,下面这篇文章主要给大家介绍了关于vuex模块获取数据及方法的相关资料,需要的朋友可以参考下2023-03-03
本文给大家总结ES6新特性：默认参数、reduce、解构赋值和Set在使用时的一些小技巧。需要的朋友参考下吧2018-04-04
vue-router2.0 组件之间传参及获取动态参数的方法
下面小编就为大家带来一篇vue-router2.0 组件之间传参及获取动态参数的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了vue使用element ui自定义手机验证规则问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了Vue项目如何根据不同运行环境打包项目问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了Vue中使用vux配置代码详解,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
这篇文章主要介绍了Vue.use与Vue.prototype的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了vue 折叠展示多行文本组件，自动根据传入的expand判断是否需要折叠，非常完美，文章通过实例代码给大家介绍的非常详细,需要的朋友可以参考下2021-10-10
最新评论