Vue.js，声明式渲染代码实例

声明式渲染

1.直接渲染文本

<p id="app">
    {{ message }}
</p>

<script>
    var app = new vue({
        el: '#app',
        data: {
            message: 'hello vue'
        }
    })
</script>

2.根据条件渲染

{{ }} 中可以插入js表达式

<p id="app">
    {{ score > 90 ? '优秀' : '良好' }}
</p>

<script>
    var app = new vue({
        el: '#app',
        data: {
            score: 96
        }
    })
</script>

3.根据函数返回结果渲染

<p id="app">
    {{ say() }}
</p>

<script>
    var app = new vue({
        el: '#app',
        data: {
            name: 'pipipier'
        },
        methods: {
            say: function () {
                return 'hello ' + this.name;
            }
        }
    })
</script>

或者可以直接传递参数

<p id="app">
    {{ say('pipipier') }}
</p>

<script>
    var app = new vue({
        el: '#app',
        data: {
            // name: 'pipipier'
        },
        methods: {
            say: function (name) {
                return 'hello ' + name;
            }
        }
    })
</script>