Vue.js 的v-for, v-html v-bind, v-show 实例

Posted 2021-01-24 Montauk

<template>
    <div>
        <ComponentA v-for="(value,key) in fruitList" :key="key"></ComponentA>
        <ul>
            <li v-for="(item,index) in fruitList">{{index}}: {{item.name}} : {{item.price}}</li>
        </ul>
        <ul>
            <li v-for="(index, key,value) in fruitList">{{index}}: {{key}} : {{value}}</li>
        </ul>
        <p v-for="item in fruitList"></p>
        <p v-html="withHtml">
            {{hello}}<br>
            this is from app2.vue, maybe will import by some js;
        </p>
        <button @click="addItem">按我</button>
        <button @click="changeItem">按我+1</button>
        <a :href="link">动态绑定</a>
        <a :class="classBind">动态绑定通常用于绑定class</a>
        <a class="link" :class="classArrayBind">动态绑定也可在绑定class的时候使用数组或者对象</a>
        <a :class="hasError?classArrayBind[0]:classArrayBind[1]">动态绑定的条件判断</a>
        <a :style="styleExample">绑定样式表</a>
        <button @click="changeColor">换颜色</button>
        <button @click="changeShow">看见?</button>
        <a v-show="ifShow">你看见我了</a>
    </div>
</template>

<script>
    import Vue from ‘vue‘
    import ComponentA from ‘./components/a‘
    export default {
        //渲染一个子component
        components: {
            ComponentA: ComponentA
        },
        data() {
            return {
                classArrayBind: [{
                        classA: ‘red‘
                    },
                    {
                        classB: ‘green‘
                    }
                ],
                styleExample: {
                    ‘font-size‘: ‘20px‘,
                    ‘color‘: ‘red‘
                },
                hasError: false,
                ifShow: true,
                classBind: ‘redFont‘,
                link: ‘http://www.baidu.com‘,
                hello: ‘world‘,
                word: ‘this is from app2.vue, maybe will import by some js;‘,
                withHtml: ‘<i>this is about i</i>‘,
                //渲染数组
                fruitList: [{
                        name: ‘apple‘,
                        price: 34
                    },
                    {
                        name: ‘banana‘,
                        price: 56
                    },
                ],
                //渲染对象
                objList: {
                    name: ‘apple‘,
                    price: 345,

                }
            };
        },
        methods: {
            addItem: function() {
                //console.info(this.fruitList)
                this.fruitList.push({
                    name: ‘peach‘,
                    price: 30
                })
            },
            changeItem: function() {
                Vue.set(this.fruitList, 1, {
                    name: ‘pineapple‘,
                    price: 999
                })
                this.fruitList[0].price = this.fruitList[0].price + 1
            },
            changeColor: function() {
                this.styleExample.color = ‘green‘
            },
            changeShow: function() {
                this.ifShow = !this.ifShow
            }
        }
    }
</script>

<style>

</style>

以上是app.vue的内容

v-bind多半用于标签<a>的属性绑定, v-model用于绑定输入框.

应该是这样.