vue的插值操作
Posted 高不高
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue的插值操作相关的知识，希望对你有一定的参考价值。
mustache语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"/> </head> <div id="app"> <h2>{{message}}</h2> <h2>{{message}} ,sku</h2> <h2>{{firname+lasname}}</h2> <h2>{{firname+\' \'+lasname}}</h2> <h2>{{firname}} {{lasname}}</h2> <h2>{{2*count}}</h2> </div> <script> const vm = new Vue({ el : \'#app\', data:{ message:\'hello\', firname:\'john\', lasname:\'bry\', count:100 } }) </script> </body> </html>
v-once
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../vue.js"/>
</head>
<div id="app">
<h2>{{message}}</h2>
<h2>{{message}} ,sku</h2>
<h2>{{firname+lasname}}</h2>
<h2>{{firname+\' \'+lasname}}</h2>
<h2>{{firname}} {{lasname}}</h2>
<h2>{{2*count}}</h2>
</div>
<script>
const vm = new Vue({
el : \'#app\',
data:{
message:\'hello\',
firname:\'john\',
lasname:\'bry\',
count:100
}
})
</script>
</body>
</html>
v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="../vue.js"></script>
<div id="app">
<h2>{{url}}</h2>
<h2 v-html="url"></h2>
</div>
<script>
const vm = new Vue({
el : \'#app\',
data:{
message:\'hello\',
url:"<a href=\'https://www.baidu.com\'>百度</a>",
}
})
</script>
</body>
</html>
v-text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="../vue.js"></script>
<div id="app">
<h2>{{message}}</h2>
<h2 v-text="message">jhvj</h2>
</div>
<script>
const vm = new Vue({
el : \'#app\',
data:{
message:\'hello\',
}
})
</script>
</body>
</html>
v-pre
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="../vue.js"></script>
<div id="app">
<h2>{{message}}</h2>
<h2 v-text="message">jhvj</h2>
</div>
<script>
const vm = new Vue({
el : \'#app\',
data:{
message:\'hello\',
}
})
</script>
</body>
</html>
v-clock
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> [v-cloak]{ display: none; } </style> </head> <body> <script src="../vue.js"></script> <div id="app" v-cloak> <h2>{{message}}</h2> </div> <script> //vue解析之前有v-cloak //vue解析之后无v-cloak setTimeout(function () { const vm = new Vue({ el : \'#app\', data:{ message:\'hello\', } }) },1000) </script> </body> </html>
以上是关于vue的插值操作的主要内容，如果未能解决你的问题，请参考以下文章