Vue_v-bind_显示图片

<head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="container"> {{code}} <br> 从vm中获取的数据为 {{str}} {{stu.stuNum}}<br> {{stu.stuName}}<br> {{stu.stuGender}}<br> <!-- v-if条件 --> <!-- v-if可以直接从 data 中取值 --> <label v-if="stu.stuGender == 'M' ">男</label><br> <label v-if="stu.stuGender == 'F' ">女</label> 
    <table border="1" cellspacing="0" width="400">
        <tr>
            <th>序号</th>
            <th>学号</th>
            <th>头像</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr v-for="s, index in stus">
            <td>{{index + 1}}</td>
            <td>{{s.stuNum}}</td>
            <td>
                <img height="30" v-bind:src="s.stuImg" />
            </td>
            <td>{{s.stuName}}</td>
            <td>
                <label v-if="s.stuGender == 'M'">男</label>
                <label v-if="s.stuGender == 'F'">女</label>
            </td>
            <td>{{s.stuAge}}</td>
        </tr>
    </table>

    <br>
    <input type="text" v-bind:value="str"/>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#container', // el 和 html绑定
        data: { // data又是一个 json; data代表一个数据结构; 里面可以放数据; 可以理解为 map
            code: 101,
            str: "从前有座山",
            stu: {
                stuNum: "100001",
                stuName: "张三",
                stuGender: "M",
                stuAge: 20
            },
            stus: [
                {
                    stuNum: "100001",
                    stuName: "张大三",
                    stuGender: "M",
                    stuAge: 23,
                    stuImg: "img/01.jpg"
                },
                {
                    stuNum: "100002",
                    stuName: "张中三",
                    stuGender: "M",
                    stuAge: 22,
                    stuImg: "img/02.jpg"
                },
                {
                    stuNum: "100003",
                    stuName: "张小三",
                    stuGender: "F",
                    stuAge: 20,
                    stuImg: "img/03.jpg"
                }
            ]
        }
    });
</script>

直接 : , 同样显示

v-bind

绑定 标签属性
v-bind 可简写为 :

posted on 2022-08-12 15:00  beyondx  阅读(195)  评论(0)  编辑  收藏  举报

导航