前端学习（1182）:差值表达式
生活随笔
收集整理的這篇文章主要介紹了
前端学习（1182）:差值表达式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
插值表達式語法：{{}}
使用時請注意以下幾點：
? ? 插值表達式是vue框架提供的【指令】
? ? 插值表達式中 不可以寫代碼片段 會報錯
? ? 屬性節點中不能使用插值表達式，如果要為元素節點動態綁定數據，我們要用v-bind動態綁定屬性（下篇文章講）
代碼演示：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><!-- 1.導入包 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body><!-- 2.添加id為app的div，將來要被vue控制--><div id="app"><!-- 注意 這是{{}} 其實是vue框架提供的【指令】 --><!-- {{}} 語法 叫做 插值表達式 --><p>{{msg}}</p>?<hr><p>{{msg.length}}</p>?<hr><p>{{msg + '~~~~~'}}</p>?<hr><p>{{dlag ? '條件為真' : '條件為假'}}</p>?<hr><!-- 插值表達式中 不可以寫代碼片段 會報錯--><!-- <p>{{for(var i = 0 ; i < 5 ; i++){}}}</p> --><h1 title="hello">娃哈哈</h1><!-- 3.注意屬性節點中不能使用插值表達式 --><!-- 如果要為元素節點動態綁定數據，我們要用其他方法 --><!-- <h1 title="{{msg}}">娃哈哈</h1> --></div><!-- 注意如果指令想要生效，必須放在vue控制的區域內 --><!-- <h1>{{msg}}</h1> ?--><script>// 3.創建vue實例對象，并指定要控制的頁面區域const vm = new Vue({// VM 實例對象，會監聽data中，每一項數據的變化，// 只要監聽到了數據的改變，就會重新把el指定區域中的所有指令// 從新解析一遍el:'#app',// 要控制頁面上的哪個區域data:{//表示頁面上要渲染的數據msg:'我是geyao!',flag:true}})? </script></body> </html>?
總結
以上是生活随笔為你收集整理的前端学习（1182）:差值表达式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端学习（1347）:用户的增删改查操作
- 下一篇： 前端学习（1290）:nodejs模块化