V-bind assignment

VueJS Course Exercise 1

by nevkatz

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


<div id="exercise">
    <!-- 1) Fill the <p> below with your Name and Age - using Interpolation -->
    <p>VueJS is pretty cool - {{ name }} ({{ age }})</p>
    <!-- 2) Output your age, multiplied by 3 -->
    <p>{{age*3}}</p>
    <!-- 3) Call a function to output a random float between 0 and 1 (Math.random()) -->
    <p>{{ randomFloat() }}</p>
    <!-- 4) Search any image on Google and output it here by binding the "src" attribute -->
    <div>
        <img v-bind:src="src" style="width:100px;height:100px">
    </div>
    <!-- 5) Pre-Populate this input with your name (set the "value" attribute) -->
    <div>
        <input type="text" v-bind:value="name">
    </div>
</div>

JavaScript

new Vue({

	el:'#exercise',
	data:{
        name:'Nevin Katz',
        age: 42,
        src:'https://nevkatz.github.io/assets/images/critters/o-critter-surprised-small-mouth.svg'
	},
	methods:{
       randomFloat:function(){
       	  return Math.random();
       }
	}

})