当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Vue.js，声明式渲染代码实例

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

2019年03月22日  | 移动技术网IT编程  | 我要评论

声明式渲染

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>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网