vue基础

最新推荐文章于 2024-07-09 21:18:14 发布

拿屎打雪仗

最新推荐文章于 2024-07-09 21:18:14 发布

阅读量334

点赞数 7

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_52183261/article/details/135428138

版权

本文展示了如何使用Vue.js框架在HTML中创建一个动态表单，包括文本输入、按钮操作、条件判断和列表渲染。还介绍了Vue的v-model绑定和条件指令如v-if/v-else-if的应用。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app" >
        <input type="text" v-model="message">
        {{message}}
        <br>
        <a v-bind:href="url">la</a>
        <br>
        <input type="text" v-model="url">
        <input type="button" value="按钮" @click="handle()">
        <br>
        年龄<input type="text" v-model="age">经判定，为:
        <span v-if="age<=35" >年龄（35及以下）</span>
        <span v-else-if="age>35&&age<60" >年龄35-60</span>
        <span v-else>年龄60以上</span>
        <br>
        年龄<input type="text" v-model="age">经判定，为:
        <span v-show="age<=35" >年龄（35及以下）</span>
        <span v-show="age>35&&age<60" >年龄35-60</span>
        <span v-show="age>60">年龄60以上</span>
<hr>    
        <br>
        <div v-for="(addr,index) in addrs">{{index}}:{{addr}}</div>
<br>
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>
            <tr  align="center" v-for="(user,index) in users">
                <td>{{index+1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <span  v-if="user.gender==1">男</span>
                    <span  v-if="user.gender==2">女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score>=85">优秀</span>
                    <span v-else-if="user.score>=60" >及格</span>
                    <span style="color: red;"  v-else>不及格</span>
                </td>
            </tr>   

        </table>

    </div>
</body>
<script>
        new Vue({
            el:"#app",
            data:{
                message:"Hellow vue",
                url:"https://www.baidu.com",
                age:20,
                addrs:["北京","上海","西安","成都","深圳"],
                users:[
                    {
                        name:"tom",
                        age:20,
                        gender:1,
                        score:78
                    },
                    {
                        name:"rose",
                        age:18,
                        gender:2,
                        score:86
                    },
                    { 
                        name:"jerry",
                        age:26,
                        gender:1,
                        score:90
                    },
                    {
                        name:"tony",
                        age:30,
                        gender:1,
                        score:52

                    }]
            },
            methods:{
                handle:function(){
                    alert("年大手大脚啊")
                }
            },
            mounted(){
                alert("vue关在完成发送请求到服务端")
            }
        })
</script>
</html>