插值表达式的用法

插值表达式

1.1.插值表达式的用法

(1)内容用法:{{}}

<body>
	<div id='app'>{{msg}}</div>
</body>
<script>
	new Vue ({
        el:'#app',
        data:{
            msg:'aaa'
        }
    })        
</script>

(2)属性用法:(指令)

<body>
    <img v-bind:src='imgUrl' alt=''>
	//简写: 
</body>
<script>
	new Vue ({
        el:'#app',
        data:{
            imgUrl:'https://ftp.bmp.ovh/imgs/2019/11/8dea885bcee7fb02.png'
        }
    })        
</script>

总结:插值表达式做属性用法时,是不加{{}}的,但是在属性上要加指令

2.2.js的支持性

(1)插值表达式对于js数据类型是支持的

<body>
	<div id='app'>
    	<p>number:{{num}} </P>//100
		<p>string:{{str}} </P>//shsh
		<p>boolean:{{bool}} </P>//true
		<p>null:{{nul}} </P>//
		<p>undefined:{{und}} </P>//
		<p>object:{{obj.name}} </P>//张三
		<p>arr:{{arr[1]}} </P>//2
		<p>fun:{{fn()}} </P>//我是函数
    </div>
</body>
<script>
        new Vue({
           el:'#app',
            data:{
               	num:100,
                str:'shah',
                bool:true,
                nul:null,
                und:undefined,
                obj:{name:'张三'},
                arr:[1,2,3,4],
                fn(){
                    return '我是函数'
                }
            }
        })            
</script>

(2)对于运算符,三目运算符,短路原则,数组操作等都支持

<body>
	<div id='app'>
 		<p>运算符:{{2+3}}</p>//5
		<p>三目运算符;{{5>4?'正确''错误'}}</p>//正确
		<p>短路原则:{{5<7&&'正确'||'错误'}}</p>//错误
        <p>数组操作:{{msg.split('').reverse().join('')}}</p>//dlroW olleH
    </div>
</body>
<script>
        new Vue({
           el:'#app',
            data:{
                msg:'Hello World'
            }
        })            
</script>

(3)对于window下面的全局变量,控制流都不支持

<body>
	<div id='app'>
 		<div> console.log: {{console.log('vue') }} </div>//报错
<p> for循环: {{ for( var i = 0; i < 1000; i++ ){   } }}</p>//报错
    </div>
</body>
<script>
        new Vue({
           el:'#app',
            data:{
            }
        })            
</script>

你可能感兴趣的:(vue)