首页 > 其他 > 详细

vue+elementui {{ }} 的使用

时间:2020-09-15 20:03:28      阅读:50      评论:0      收藏:0      [点我收藏+]

{{ }} 里面可以是:

  1. 表达式
  2. 字符串
  3. 函数
  4. 正则表达式
  5. boolean

主要有

1.{{num + 1}} 运算符

data:{
  num:5
}

2.{{status ? ‘succeed’ : ‘failed’}} 三元表达式

data:{
    status: true
}

3.{{changeTime()}} 运行函数

changeTime(){
    return  this.value.replace(/\d/g,‘‘)
}

可以拿到时间戳之后,用new Date转换成时间对象,然后进入changeTime这个自己定义的函数里

     <el-table-column slot="ti_content" label="文章内容" align="left" width="300px">
       <template slot-scope="scope">
         <div class="contentClass">{{ highlight(scope.row.ti_content) }}</div>
       </template>
     </el-table-column>
 
     // 方法 methods:[ 适合table之类的不用显示文字样式 ]
      highlight (item) {
          return item.replace(/<[^>]+>/g, ‘‘)// 去掉所有的html标记
      },

4.{{}} 可以写正则表达式

<div id="app">
  <p>{{value.replace(/,/g,‘‘)}}</p>   //把全部的逗号去掉
</div>

<script>        
    new Vue({
        el: ‘#app‘,
        data:{
            value: ‘3,800,239.00‘
        }
    })
</script>

参考:https://blog.csdn.net/Yushuzii/article/details/90732689?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_weight&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_weight

vue+elementui {{ }} 的使用

原文:https://www.cnblogs.com/sylys/p/13674594.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!