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>

相关阅读:
EDA实验------数控分频器设计（QuartusII）
reportlab 生成pdf文件（python）
3D深度相机---结构光
MySQL之导入导出&索引&执行计划
docker的联合文件系统（UnionFS）
无人机助力智慧农田除草新模式，基于YOLOv8全系列【n/s/m/l/x】参数模型开发构建无人机航拍场景下的农田杂草检测识别系统
宋浩高等数学笔记（三）微分中值定理
自编码器AE全方位探析：构建、训练、推理与多平台部署
K8s复习笔记-1
vs C2039 “xxx“:不是“xxx“的成员解决办法

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