vue+elementui {{ }} 的使用


{{ }} 里面可以是:

  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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM