Vue_v-bind_显示图片

2022-08-12 15:00:08 阅读：155 来源： 互联网

标签：stuName Vue stuAge bind jpg stu stuGender stuNum 图片

<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>   <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>

直接 : , 同样显示

标签：stuName,Vue,stuAge,bind,jpg,stu,stuGender,stuNum,图片
来源： https://www.cnblogs.com/beyondx/p/16579978.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue_v-bind_显示图片