Interpolation {{}} का परिचय
Double curly braces आपके HTML के अंदर सीधे data या एक छोटा expression print करते हैं।
In this page:
Syntax
<p>{{ expression }}</p>
<p>{{ message.toUpperCase() }}</p>Interpolation {{}}
Mustache interpolation एक JavaScript expression evaluate करता है और result को text की तरह insert करता है। यह simple expressions support करता है जैसे arithmetic, ternaries, और method calls, लेकिन statements नहीं।
Text escape होता है, इसलिए data में HTML text की तरह दिखता है, और v-html raw HTML render करता है (सिर्फ trusted content के साथ इस्तेमाल करें)।
Note:
कभी भी user-provided content के साथ v-html इस्तेमाल न करें: यह XSS का दरवाज़ा खोलता है।
उदाहरण: Interpolation {{}}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<p>{{ name }} is {{ age }} years old</p>
<p>Next year: {{ age + 1 }}</p>
<p>{{ age >= 18 ? "adult" : "minor" }}</p>
<p>{{ html }}</p>
<p v-html="html"></p>
</div>
<script>
Vue.createApp({
data() { return { name: "Ada", age: 36, html: "<b>bold</b>" }; },
}).mount("#app");
</script>
</body>
</html>
<!-- Output:
Rendered: Ada is 36 years oldNext year: 37adult<b>bold</b>bold
-->Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- braces के अंदर if या for जैसे statements इस्तेमाल करना
- यह उम्मीद करना कि HTML mustaches से render होगा
- template में heavy logic डालना
चैप्टर सारांश
- {{ }} expression results print करता है
- सिर्फ expressions, statements नहीं
- Output escaped होता है
- v-html raw HTML render करता है
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: