Vue的模板語法
阿新 • • 發佈：2021-01-09
1、插值表示式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>模板語法</title> <script src="./vue.js"></script> </head> <body> <div id="app">{{name}}</div> <script> var vm = new Vue({ el: "#app", data: { name: "Xiang" } }) </script> </body> </html>
2、v-text、v-html表示式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>模板語法</title> <script src="./vue.js"></script> </head> <body> <div id="app"> <div v-text="name"></div> <div v-html="name"></div> </div> <script> var vm = new Vue({ el: "#app", data: { name: "Xiang" } }) </script> </body> </html>
3、v-text、v-html表示式區別
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>模板語法</title> <script src="./vue.js"></script> </head> <body> <div id="app"> <div v-text="name"></div> <div v-html="name"></div> </div> <script> var vm = new Vue({ el: "#app", data: { name: "<h1>Xiang</h1>" } }) </script> </body> </html>
4、js表示式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模板語法</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div>{{name +' xuewei'}}</div>
<div v-text="name +' xuewei'"></div>
<div v-html="name +' xuewei'"></div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
name: "Xiang"
}
})
</script>
</body>
</html>