表达式(简单运算)

2018-08-19  本文已影响0人  九尾的日志

模板内的表达式用于简单运算,复杂的使用计算属性的方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表达式</title>
        <script src="vue.js"></script>
    </head>
    <body>
        
        <div id="app">
            
            <!-- 简单运算 -->
            <p>{{count+10}}</p>
            
            <!-- 三元表达式 -->
            <p>{{status ? '字符串1' : '字符串2'}}</p>
            
            <!-- 截取字符 -->
            <p>{{str.slice(1,3)}}</p>
            
            <!-- 调用方法 -->
            <p>{{getNumber()}}</p>
            
            
        </div>
        
        <script>
            
            var vm = new Vue({
                
                el:'#app',
                
                data:{
                    count:1,
                    status:true,
                    str:'北京欢迎你'
                },
                
                methods:{
                    
                    getNumber:function(){
                        
                        return '108'
                    }
                }
            })
            
        </script>
        
    </body>
</html>

上一篇 下一篇

猜你喜欢

热点阅读