Vue小白篇 -Vue 的模板语法

可以插入任何你想插入的内容,除了 if-else if-else用三元运算符代替

<div id="box">
    <!--模板语法-->
    <h2>{{ msg }}</h2>
    <h3>{{ 'hello world' }}</h3>  <!--带引号的  是写死的-->
    <h3>{{ 1+1 }}</h3>   <!--可以运算-->
    <h3>{{ {'name':'tom'} }}</h3>     <!--可以插对象-->
    <h5>{{ person.name }}</h5>
    <h2>{{ 1>2 ? '真的':'假的' }}</h2>  <!--三元运算符-->
	
    <!--输入euV olleh"-->
    <p>{{ msg2.split('').reverse().join() }}</p>  
</div>


<script>
    // 2、实例化对象
    new Vue({
        el:'#box', 
        data:{
            msg: 'hello',
            person:{
                name: 'tom',
            },
            msg2: 'hello Vue',
            text: '<h2>好嗨哟</h2>'
        }
    });
</script>
posted @ 2019-09-04 16:19  大大怪超人  阅读(117)  评论(0)    收藏  举报