vue中的屬性綁定和雙向數據綁定
阿新 • • 發佈:2018-08-19
表達式 ons utf-8 vue 數據綁定 orm lan 提示 html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屬性綁定和雙向數據綁定</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div title="this is hello world">hello world</div>//title作用是當鼠標放在hello world 上面的時候,顯示this is hello world
</div>
<script> new Vue({ el:"#root", }) </script> </body> </html> 提示語可變的情況: <html lang="en"> <head> <meta charset="UTF-8"> <title>屬性綁定和雙向數據綁定</title> <script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div v-bind:title="title">hello world</div>//使用模板指令,等號後面跟的是一個JS表達式 v-bind:可以縮寫成:
</div>
<script> new Vue({ el:"#root", data:{ title:"this is hello world"//此時數據項的title 和上面的屬性做好了數據綁定
}
})
</script>
</body>
</html>
<script> new Vue({ el:"#root", }) </script> </body> </html> 提示語可變的情況: <html lang="en"> <head> <meta charset="UTF-8"> <title>屬性綁定和雙向數據綁定</title> <script src="./vue.js"></script>
<script> new Vue({ el:"#root", data:{ title:"this is hello world"//此時數據項的title 和上面的屬性做好了數據綁定
vue中的屬性綁定和雙向數據綁定