Vue.js中关于“{{}}”的用法

目录
  • 关于“{{}}”的用法
  • Vue表达式{{}}中拼接字符

关于“{{}}”的用法

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)

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅谈vue在html中出现{{}}的原因及解决方式

    原因: 浏览器渲染机制,解析html结构 -> 加载外部脚本和样式表文件 -> 解析并执行脚本代码 -> 构造html dom模型 -> 加载图片等外部文件 -> 页面加载完毕. 初始化vue的js写在页面底部,也就是最后才执行js脚本. 所以页面从头到尾开始渲染时,渲染到标签时,由于vue还未初始化,所以就会显示类似这样的代码 <h2>{{courseName}}</h2> 当网速很慢的时候就看得比较清楚,可能会让用户误以为bug之类的,快一点的话就

  • vue中{{}},v-text和v-html区别与应用详解

    vue中{{}},v-text和v-html区别与应用详解

    {{}}获取值,不会清空标签原有内容 v-text 获取值,会清空标签原有内容,输出的是纯文本 v-html 获取值,会清空标签原有内容,若数据中包含html标签,将其当html标签解析后输出 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <

  • vue.js 实现v-model与{{}}指令方法

    上次我们已经分析了vue.js是通过Object.defineProperty以及发布订阅模式来进行数据劫持和监听,并且实现了一个简单的demo.今天,我们就基于上一节的代码,来实现一个MVVM类,将其与html结合在一起,并且实现v-model以及{{}}语法. tips:本节新增代码(去除注释)在一百行左右.使用的Observer和Watcher都是延用上一节的代码,没有修改. 接下来,让我们一步步来,实现一个MVVM类. 构造函数 首先,一个MVVM的构造函数如下(和vue.js的构造函数

  • 解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题

    由于之前练习koa2,直接渲染的jquery写的传统页面. 这次想偷懒,直接script引入vue,发现渲染不出data值. 渲染引擎用得是xtpl, 找了半天没有发现可以修改xtpl渲染分隔符的配置 vue有! var myVue = new Vue({ el: '#msgBoard', delimiters:['$$','$$'], data() { return { msg: { num: 10 } } }, mounted() { console.dir(this) }, }) 补充知识

  • vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例

    vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例

    本文实例讲述了vue防止花括号{{}}闪烁v-text和v-html.v-cloak用法.分享给大家供大家参考,具体如下: 一.v-text和v-html <span>{{msg}}</span>  -->     v-text {{{msg}}}      -->    v-html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

  • vue data有值,但是页面{{}} 取不到值的解决

    我的问题出在js引入的顺序不对,导致不能正常显示vue中的值 正确的顺序应该是: 先引入vue的js--------html代码-----最后引入自己写的js 补充知识:vue中子组件的created.mounted生命周期钩子中获取不到props中的值问题 父子组件通信 这个很简单,父组件中使用v-bind绑定传送,子组件使用props接收即可 . 例如:在父组件中 <template> <div> <div :Data="Data"></d

  • vue渲染时闪烁{{}}的问题及解决方法

    v-if和v-show可能是日常开发中最常用的两个指令,虽然看上去两者功能是类似的,但是两者还是存在很大区别的.  v-if与v-show区别: 在切换 v-if 块时,Vue.js 有一个局部编译/卸载过程,因为 v-if 之中的模板也可能包括数据绑定或子组件.v-if 是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件. v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做--在条件第一次变为真时才开始局部编译(编译会被缓存起来). 相比之下,

  • 浅谈Vue.js中ref ($refs)用法举例总结

    本文介绍了Vue.js中ref ($refs)用法举例总结,分享给大家,具体如下: 看Vue.js文档中的ref部分,自己总结了下ref的使用方法以便后面查阅. 一.ref使用在外面的组件上 HTML 部分 <div id="ref-outside-component" v-on:click="consoleRef"> <component-father ref="outsideComponentRef"> </co

  • Vue.js中关于“{{}}”的用法

    目录 关于“{{}}”的用法 Vue表达式{{}}中拼接字符 关于“{{}}”的用法 Vue.js核心库只关注视图层,而我们只需要注重数据的操作就好,通过接下来的学习会更深的理解这句话,vue.js通过很多指令和修饰符来完成对视图的关注,第一个是{{}} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="

  • vue.js中$watch的用法示例

    前言 vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容易的和其他库整合.代码压缩后只有24kb Vue.js 提供了一个方法 watch,它用于观察Vue实例上的数据变动.对应一个对象,键是观察表达式,值是对应回调.值也可以是方法名,或者是对象,包含选项. 在实例化时为每个键调用 $watch() ; <template> //观察数据为字符串或数组 <input v-model="example0"/> <input v-m

  • Vue.js中数组变动的检测详解

    前言 最近在尝试用Vue.js重构公司的现有业务代码,组件化的设计思路和MVVM的思想让我深深沉迷于其中.但是是踩到了不少坑,就比如这篇文章介绍的数组绑定后的更新检测. 相信大家都知道Observer,Watcher,vm 可谓 Vue 中比较重要的部分,检测数据变动后视图更新的重要环节.在 vue.js中$watch的用法示例 中,我们讨论了如何实现基本的 watch . 接下来,我们来看看如何实现数组变动检测. 例子: // 创建 vm let vm = new Vue({ data: {

  • 基于vue.js中事件修饰符.self的用法(详解)

    .self可以理解为跳过冒泡事件和捕获事件,只有直接作用在该元素上的事件才可以执行. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>self</title> <script src="vue.js"></script> <!--'''''''

  • Vue.js 中的 v-show 指令及用法详解

    1 用法 v-show 指令通过改变元素的 css 属性(display)来决定元素是显示还是隐藏. html: <div id="app"> <p v-show="type==='科技'">大数据之下的锦鲤:为什么你的微博总抽不到奖</p> </div> js: <script> var app = new Vue({ el: '#app', data: { type:'技术' } }); </sc

  • vue.js中toast用法及使用toast弹框的实例代码

    1.首先引入 import { Toast } from 'vant' 写个小列子 绑定一个click事件 2.写事件 在methods写方法 showToast() { this.$toast({ message: "今日签到+3", }) }, 3.效果图如下 一个简单的toast提示成就好了 下面通过实例代码看下vue 中使用 Toast弹框 import { ToastPlugin,ConfirmPlugin,AlertPlugin} from 'vux' Vue.use(To

  • Vue.js中v-for指令的用法介绍

    Vue.js中v-for指令的用法介绍

    一.什么是v-for指令 在Vue.js中,我们可以使用v-for指令基于源数据重复渲染元素.也就是说可以使用v-for指令实现遍历功能,包括遍历数组.对象.数组对象等. 二.遍历数组 代码示例如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=&quo

  • vue.js中指令Directives详解

    vue.js中指令Directives详解

    想必喜欢前端开发的小伙伴们都或多或少接触过MVVM这个概念,说起MVVM,第一时间想到的便是angularjs,knockoutjs等已经被广泛运用的MVVM框架,之前我也没有在这方面有很多了解,最近在做项目的过程中接触了Vue.js,这是一个小巧精致,性能优异的MVVM框架,可以说对初学者是比较容易入门的,该框架的英文文档写得很好,但是中文版访问还不太稳定,翻译也有待改进,所以自己一遍学习,一遍记录自己的思考,与各位共享学习的经验. 第一篇主要是想谈谈vue.js中的Directives即指令

  • Vue.js中数据绑定的语法教程

    数据绑定语法 Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. 插值 文本 数据绑定最基础的形式是文本插值,使用 "Mustache" 语法(双大括号): <span>Message: {{ msg }}</span> Mustache 标签会被相应数据对象的 msg 属性的值替换.每当这个属性变化时它也会更新.

随机推荐