vue常见的指令


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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:"这是v-html指令",
                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>

相关阅读:
JAVA学习----HashSet类
Kickstarter众筹是什么流程
代码随想录训练营day57
边缘计算AI智能安防监控视频平台车辆违停算法详解与应用
Java输入-a,-b,geek,-c,888,-d,[hello,world]字符之后，如何将[hello,world]这个不分开
词向量word2vec（图学习参考资料）
『Java安全』Shiro1.2.4反序列化漏洞(Shiro-550|CVE-2016-4437)复现与浅析
Django DRF 全局异常处理
9.8 段错误，虚拟内存，内存映射 CSAPP
CubeFS - 新一代云原生存储系统

原文地址：https://blog.csdn.net/weixin_62971115/article/details/132708778