vue 基础

vue.js-----v-bind

2018-09-13  本文已影响0人  郭佳伟666

v-bind:绑定属性的格式:v-bind=‘值’

简写:“:”

1.点击切换图片

css部分
<style>
            ul {
                overflow: hidden;
            }
            
            li {
                width: 60px;
                border: 1px solid #000;
                float: left;
                text-align: center;
                list-style: none;
            }
            
            img {
                width: 500px;
                height: 500px;
            }
</style>
html部分
<div id='itany'>
            <img v-bind:src="url" alt="">
        <ul>
            <li v-for="(value,index) in list" von:click='chg(index)'>
                        {{index+1}}
            </li>
        </ul>
</div>
js部分
<script>
            new Vue({
                el: '#itany',
                data: {
                    url: './images/1.png',
                    list: ['./images/1.png',
 './images/2.png', './images/3.jpg']
                },
                methods: {
                    chg: function(ind) {
                        this.url = this.list[ind]
                    }
                }
            })
</script>
上一篇下一篇

猜你喜欢

热点阅读