Chat or leave a message for the other users
v-if.v-if directive would remove/insert the <h4> element based on the truthiness of the value of the expression seen.
<div id='app'>
<h3 v-if='seen'>Now you see me</h3>
Click on this button to insert /remove the H4 element:
<button @click='seen =!seen'>Click</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {seen: false}
})
</script>
v-once directive, which is used to perform one-time interpolations that do not update on data change.
<div id='app'>
<span v-once>This text will never change: {{ msg }}</span>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {msg: 'Life is Love'}
});
//Trying to change the msg
vm.msg ='Another message';
</script>
v-directive:argument ).v-bind directive is used to reactively update an HTML attribute.
href is the argument, which tells the v-bind directive to bind the element's href attribute to the value of the expression url.
<div id='app'>
<a v-bind:href='url'>Link</a>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {url: '//coursesweb.net/'}
})
</script>
v-html directive is used to output real HTML, its value is the data property name with the html string.
<div id='demo'>
<div v-html='str_htm'></div>
</div>
<script>
var vm = new Vue({
el: '#demo',
data: {
str_htm: '<h3>Forgiveness heals</h3><b>I forgive everyone, including myself</b>, the mind becomes healthy and <i>the body heals</i>.'
}
})
</script>
v-on directive, which listens to DOM events:
<div id='app'>
<button v-on:click='test_f'>Click Btn</button>
</div>
<script>
var vm = new Vue({
el: '#app',
methods: {
test_f: function(){
alert('MarPlo.net');
}
}
})
</script>
v-directive:[argument] ).
<div id='app'>
<button v-on:[ev_name]='test_f'>Click Btn</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {ev_name: 'click'},
methods: {
test_f: function(){
alert('MarPlo.net');
}
}
})
</script>
v-on:[ev_name] will be equivalent to v-on:click..prevent modifier tells the v-on directive to call event.preventDefault() on the triggered event:
<form v-on:submit.prevent='onSubmit'> ... </form>
v-bind and v-on.
<!-- full syntax --> <a v-bind:href='url'> ... </a> <!-- shorthand --> <a :href='url'> ... </a> <!-- shorthand with dynamic argument --> <a :[key]='url'> ... </a>
<!-- full syntax --> <a v-on:click='doSomething'> ... </a> <!-- shorthand --> <a @click='doSomething'> ... </a> <!-- shorthand with dynamic argument --> <a @[event]='doSomething'> ... </a>
<meta name="description" content="70-160 characters that describes the content of the page" />
#some_id {
clear: both;
}var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);$arr =[7, 8, "abc", 10); $nri = count($arr); echo $nri; // 4