vue常见的指令

最新推荐文章于 2024-05-10 16:55:05 发布

MaGgIeOo0

最新推荐文章于 2024-05-10 16:55:05 发布

阅读量608

点赞数

分类专栏： web前端基础文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_62971115/article/details/132708778

版权

web前端基础专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!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 = "cdn.jsdelivr.net_npm_vue@2_dist_vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-text="mag1"></div>
        <div v-html="mag2"></div>
        <div v-if="flag2">这是v-if指令</div>
        <div v-else="flag2">这是v-else指令</div>
        <div v-if="flag1">这是v-if指令</div>
        <div v-else="flag1">这是v-else指令</div>
        <div v-show="flag1">这是v-show指令</div>
        <button v-on:click="btn1">点击我数字加一</button>{{count}}<br>
        <button v-on:click="btn2">点击出现弹窗</button>
        <table border="=2" cellspacing="0" cellpadding="0">
            <tr>
                <td>姓名</td>
                <td>年龄</td>
            </tr>
            <tr v-for="(stu,index) in student">
                <td v-text="stu.name"></td>
                <td v-text="stu.age"></td>
            </tr>
        </table>
        <font v-bind:color="color">这是v-bind指令</font><br>
        <a v-bind:href="url">百度链接</a><br>
        <input type="text" placeholder="这是v-model指令" v-model="name" v-on:blur="chach"><font v-bind:color="col">{{mgs}}</font>
        <div>
            <div>姓名：{{textName}}</div>
            <div>姓：{{surname}}</div>
            <div>名：{{lastname}}</div>
        </div>
        <input type="text" placeholder="这是watch属性" v-model="textName">
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                mag1:"这是v-text指令",
                mag2:"<a href=''>这是v-html指令</a>",
                flag1:true,
                flag2:false,
                count:0,
                student:[
                    {"name":"mary","age":23},
                    {"name":"jack","age":21},
                    {"name":"tom","age":19}
                ],
                url:"http://www.baidu.com",
                color:"red",
                name:"",
                mgs:"",
                col:"",
                textName:"王权富贵"
            },
            methods:{
                btn1(){
                    this.count++;
                },
                btn2(){
                    alert("这是一个警告弹窗");
                },
                chach(){
                    if(this.name==null || this.name ==""){
                        this.mgs="账号不能为空";
                        this.col="red";
                    }else{
                        this.mgs="√";
                        this.col="green";
                    }
                }
            },
            computed:{
                surname(){
                    return this.textName.substring(0,2);
                },
                lastname(){
                    return this.textName.substring(2);
                }
            },
            watch:{
                textName:function(){
                    alert("表单域值发生了变化！")
                }
            }
        });
    </script>
</body>
</html>