目录关于“{{}}”的用法Vue表达式{{}}中拼接字符关于“{{}}”的用法 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.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)
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
--结束END--
本文标题: Vue.js中关于“{{}}”的用法
本文链接: https://www.lsjlt.com/news/168256.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0