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引入字体图标报错的解决方法

    今天小编就为大家分享一篇Vue2.x中利用@font-size引入字体图标报错的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue+Echarts实现基本K线图的绘制

    Vue+Echarts实现基本K线图的绘制

    这篇文章主要为大家详细介绍了如何利用Vue和Echarts实现基本K线图的绘制,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-03-03
  • vuex模块获取数据及方法的简单示例

    vuex模块获取数据及方法的简单示例

    Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,下面这篇文章主要给大家介绍了关于vuex模块获取数据及方法的相关资料,需要的朋友可以参考下
    2023-03-03
  • 你点的 ES6一些小技巧,请查收

    你点的 ES6一些小技巧,请查收

    本文给大家总结ES6新特性:默认参数、reduce、解构赋值和Set在使用时的一些小技巧。需要的朋友参考下吧
    2018-04-04
  • vue-router2.0 组件之间传参及获取动态参数的方法

    vue-router2.0 组件之间传参及获取动态参数的方法

    下面小编就为大家带来一篇vue-router2.0 组件之间传参及获取动态参数的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • vue使用element ui自定义手机验证规则问题

    vue使用element ui自定义手机验证规则问题

    这篇文章主要介绍了vue使用element ui自定义手机验证规则问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • Vue项目如何根据不同运行环境打包项目

    Vue项目如何根据不同运行环境打包项目

    这篇文章主要介绍了Vue项目如何根据不同运行环境打包项目问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue中使用vux配置代码详解

    Vue中使用vux配置代码详解

    这篇文章主要介绍了Vue中使用vux配置代码详解,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • Vue.use与Vue.prototype的区别及说明

    Vue.use与Vue.prototype的区别及说明

    这篇文章主要介绍了Vue.use与Vue.prototype的区别及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • vue 折叠展示多行文本组件的实现代码

    vue 折叠展示多行文本组件的实现代码

    这篇文章主要介绍了vue 折叠展示多行文本组件,自动根据传入的expand判断是否需要折叠,非常完美,文章通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2021-10-10

最新评论