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 awesome swiper异步加载数据出现的bug问题
这篇文章主要介绍了vue awesome swiper异步加载数据出现的bug问题,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-07-07
这篇文章主要介绍了vue2.x对象深层劫持的原理实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
这篇文章主要介绍了vue data中如何获取使用store中的变量，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
本文主要介绍了el-table渲染慢卡顿问题最优解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了解决vue页面注入js修改input值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了Vue FileManagerPlugin 报错问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
vue使用天地图、openlayers实现多个底图叠加显示效果
这篇文章主要介绍了vue使用天地图、openlayers实现多个底图叠加显示,根据返回的经纬度列表通过天地图、openlayers实现底图添加，本文通过示例代码给大家介绍的非常详细，需要的朋友参考下吧2022-04-04
这篇文章主要介绍了vue 插槽简介及使用示例，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下2020-11-11
我们知道在vue中每个页面都需要在路由中声明,下面这篇文章主要给大家介绍了关于vue路由跳转携带参数的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
vue鼠标hover(悬停)改变background-color移入变色问题
这篇文章主要介绍了vue鼠标hover(悬停)改变background-color移入变色问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最新评论