SOURCE

console 命令行工具 X clear

                    
>
console
new Vue({
    el: '#exercise',
    data: {
        name: 'wusheng',
        age: 29,
        imgSrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592998727296&di=a29124a5b45977eb7f62011c5c5953ba&imgtype=0&src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20180802%2F01%2F1533145496-sNbLOrnzSt.jpg'
    },
    methods: {
        multiplyAge: function() {
            return this.age*3;
        },
        getRandom: function() {
            return Math.random();
        },
        inputName: function(event) {
            this.name = event.target.value;
        }
    }
});
<script src="https://unpkg.com/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>{{getRandom()}}</p>
    <!-- 4) Search any image on Google and output it here by binding the "src" attribute -->
    <div>
        <img v-bind:src="imgSrc" style="width:100px;height:100px">
    </div>
    <!-- 5) Pre-Populate this input with your name (set the "value" attribute) -->
    <div>
        <input type="text" v-on:input="inputName">
    </div>
</div>