Vue.js中关于“{{}}”的用法
更新时间：2022年09月23日 09:39:32 作者：很单纯的娃
这篇文章主要介绍了Vue.js中关于“{{}}”的用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
关于“{{}}”的用法
Vue.js核心库只关注视图层，而我们只需要注重数据的操作就好，通过接下来的学习会更深的理解这句话，vue.js通过很多指令和修饰符来完成对视图的关注，第一个是{{}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script> <!-- 使用vue.js需要先使用 -->
</head>
<body>
<div id="root">
<!-- 可以直接写变量-->
{{userName}}
<!-- 可以写三元表达式 -->
{{true?'男':'女'}}
<!-- 可以调用函数 功能是倒叙-->
{{userName.split("").reverse().join("")}}
</div>
</body>
<script>
new Vue({
el:'#root',//挂载的元素，只有在这个区域内才能使用Vue
data:{
userName:'仓央嘉措',
sex:"男"，
num:1,
src:'http://img0.imgtn.bdimg.com/it/u=4150802370,1902002068&fm=11&gp=0.jpg',
str:'我是一只小小小鸟'
},//变量定义在里面
methods:{},//方法定义在这里面
filters:{},//过滤器
components:{},//组件
computed:{}//计算属性
})
</script>
</html>
执行结果：
Vue表达式{{}}中拼接字符
在表达式中我们一直都只绑定简单的键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
例如：
{{ number + 1 }} {{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}但是最近我有一个需求，就是在表达式中进行一个拼接。
<div class="appdouble_data">
<div class="BonusPoolDetails_data"
v-for = 'item,index in list'
>
<div class="BonusPoolDetails_data_tit">
{{item.start_at}}至{{item.end_at}}
</div>
<div class="data_flex">
<div class="data_flex_tit flex align-cen">
<div>推荐人数</div>
<div>奖金池</div>
<div>累计奖金</div>
<div>获得分红</div>
</div>
<div class="data_flex_list flex align-cen"
v-for = 'props,key in item.has_details'
>
<div>{{props.invite_number}}</div>
<div>{{props.pool_index}}</div>
<div>{{item[String(props.pool_index) + '_pool']}}</div>
<div>{{props.money}}</div>
</div>
</div>
</div>
</div>大家着重看这段代码
{{item[String(props.pool_index) + '_pool']}}这个是利用第二个循环里的一个数据props.pool_index来拼接成第一个循环里的相对应一个数据(item.4_pool)
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在大型 Vue 项目中,组件之间的关系可能会变得非常复杂,甚至会出现循环依赖的问题,本文将通过通俗易懂的方式,讲解如何在 Vue 中解决组件之间的循环依赖问题,希望对大家有所帮助2024-11-11
这篇文章主要介绍了vue axios 封装请求拦截多次弹窗的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
本文介绍了Vue的全局安装过程、查看版本、安装扩展等步骤,并提供了解决在.vue文件目录下运行报错的方法,涉及到的错误解决包括使用命令安装@vue/compiler-sfc和执行npm install命令安装依赖2024-10-10
下面小编就为大家分享一篇axios post提交formdata的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要给大家介绍了关于vue3+vite+vant4手机端项目实战的相关资料,Vue3是一种前端开发框架,它的目标是提供更好的性能和开发体验,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了Vue3中如何自定义双向绑定问题,具有很好的参考价价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要为大家详细介绍了Vue.js组件tree实现省市多级联动的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
本篇文章主要介绍了Vue下滚动到页面底部无限加载数据的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了element-ui 弹窗组件封装的步骤，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2021-01-01
这篇文章主要为大家详细介绍了基于vue.js实现侧边菜单栏的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
最新评论