<div>Message: {{ msg }}</div>
<div id='app'>
<div>{{ str }}</div>
<button @click='str = "Iubesc Viata"'>Click</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {str: 'Sunt Eu insumi.'}
})
</script>
v-html.
<div id='app'>
<p>Without directive: {{ str_html }}</p>
<p>Using v-html directive: <span v-html="str_html"></span></p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {str_html: '<b style="color:#00f">Sunt Eu insumi.</b>'}
})
</script>
Sintaxa cu acolade duble nu se foloseste in atribute HTML.
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
- Exemplu, arata numarul de clicuri pe un buton:
<div id='app'>
<div>Number of licks: {{ nr}}</div>
<button @click='nr +=1'>Click</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {nr: 0}
})
</script>
<div id='app'>
<p>{{ msg.split('').reverse().join('') }}</p>
Add some text in this input:<br>
<input v-model='msg'>
</div>
<script>
var vue_ob = new Vue({
el: '#app',
data: {msg: 'Hello Vue!'}
})
</script>
<input type="color" name="get_color" />
#some_id:hover {
transform: rotate(60deg);
-ms-transform: rotate(60deg); /* IE 9 */
-moz-transform: rotate(60deg); /* Firefox */
}var maxn = Math.max(8, 4, 88, 56); alert(maxn); // 88
include_once("un_fisier.php");Most people arrived ahead of time. - Cei mai multi oameni au sosit inainte de vreme (prea devreme).
Este fruto es buenísimo. - Acest fruct este extrem /nemaipomenit de bun.