<template>
    <view class="content">
        <text> 我是首页 </text>
        <!-- 输出纯字符串 -->
        {{"huoyan"}}
        <view>{{msg}}</view>
        <!-- 字符串的拼接 -->
        <view>{{‘我是‘+msg}}</view>
        <!-- 三元表达式 -->
        <view>{{ ‘huoyan‘.indexOf(‘huo‘)!== -1?‘最美的妹纸‘:‘no‘}}</view>
        <view>{{ ‘我爱北京*‘.slice(0,4)}}</view>
        <view>{{ false||‘‘||‘老铁 买了个表‘}}</view>
        <!-- 动态绑定一个值 -->
        <image :src="url"></image>
        <!-- 属性绑定可以用字符串拼接 -->
        <view :class="‘box‘+11">天王盖地虎</view>
        <!-- 动态的绑定一个类 -->
        <view :style="{width:‘100px‘,height:‘100px‘,background:‘red‘}"></view>
        <view :style="[{width:‘100px‘,height:‘100px‘,background:‘green‘}]"></view>
        <!-- 三元表达式 -->
        <view :class="{box1:true}"></view>
        <!-- 绑定多个值 -->
        <view :class="[‘box1‘,‘box2‘]"></view>
        <!-- 循环数组 注意要绑定key -->
        <!-- 定义一个方法 让他点击的时候切换类 -->
        <view v-for="(item,index) in names" :key="index" :class="{box3:index == index1}" @click="dianji(index)">
            {{item.name+‘---‘+item.age}}
        </view>
    </view>
</template>

<script>
    import test from "../../components/test.vue"
    export default {
        data() {
            return {
                msg: "小白",
                url: ‘https://www.baidu.com/img/bd_logo1.png‘,
                index1: 0,
                names: [{
                        name: ‘李白‘,
                        age: 15
                    },
                    {
                        name: ‘杜甫‘,
                        age: 20
                    },
                    {
                        name: ‘张三‘,
                        age: 25
                    }
                ],
            }
        },
        onLoad() {},
        methods: {
            dianji(index) {
                this.index1 = index
            }
        }
    }
</script>

<style>
    .box1 {
        width: 50px;
        height: 50px;
        background: #DD524D;
    }

    .box2 {
        border: 1px solid #4CD964;
    }

    .box3 {
        background: #4CD964;
    }
</style>