Question

vue中怎么动态添加img的路径

Answer 1

vue中动态添加img的路径，可以使用v-bind语法。举例如下：

HTML代码：

<div id="app">
    <img v-bind:src="src">
</div>

JavaScript（VUE）代码：

var vm = new Vue({
    el: '#app',
    data: {
        src: 'black.jpg'
    }
});

初始化运行结果：

在控制台中动态修改img的src属性：

vm.src="felix.jpg"

修改的运行结果为：

我们刚刚已经完成了一次动态修改的操作，你可以在js中的任意位置修改已绑定的img的src值。

注：在vue中，v-bind还可以缩写，以下HTML代码与上面的效果相同。

<div id="app">
    <img :src="src">
</div>

直接将v-bind删掉即可，但是冒号（:）不能删。