• vue常见的指令

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <script src = "cdn.jsdelivr.net_npm_vue@2_dist_vue.js">script>
    8. head>
    9. <body>
    10.     <div id="app">
    11.         <div v-text="mag1">div>
    12.         <div v-html="mag2">div>
    13.         <div v-if="flag2">这是v-if指令div>
    14.         <div v-else="flag2">这是v-else指令div>
    15.         <div v-if="flag1">这是v-if指令div>
    16.         <div v-else="flag1">这是v-else指令div>
    17.         <div v-show="flag1">这是v-show指令div>
    18.         <button v-on:click="btn1">点击我数字加一button>{{count}}<br>
    19.         <button v-on:click="btn2">点击出现弹窗button>
    20.         <table border="=2" cellspacing="0" cellpadding="0">
    21.             <tr>
    22.                 <td>姓名td>
    23.                 <td>年龄td>
    24.             tr>
    25.             <tr v-for="(stu,index) in student">
    26.                 <td v-text="stu.name">td>
    27.                 <td v-text="stu.age">td>
    28.             tr>
    29.         table>
    30.         <font v-bind:color="color">这是v-bind指令font><br>
    31.         <a v-bind:href="url">百度链接a><br>
    32.         <input type="text" placeholder="这是v-model指令" v-model="name" v-on:blur="chach"><font v-bind:color="col">{{mgs}}font>
    33.         <div>
    34.             <div>姓名：{{textName}}div>
    35.             <div>姓：{{surname}}div>
    36.             <div>名：{{lastname}}div>
    37.         div>
    38.         <input type="text" placeholder="这是watch属性" v-model="textName">
    39.     div>
    40.     <script>
    41.         new Vue({
    42.             el:"#app",
    43.             data:{
    44.                 mag1:"这是v-text指令",
    45.                 mag2:"这是v-html指令",
    46.                 flag1:true,
    47.                 flag2:false,
    48.                 count:0,
    49.                 student:[
    50.                     {"name":"mary","age":23},
    51.                     {"name":"jack","age":21},
    52.                     {"name":"tom","age":19}
    53.                 ],
    54.                 url:"http://www.baidu.com",
    55.                 color:"red",
    56.                 name:"",
    57.                 mgs:"",
    58.                 col:"",
    59.                 textName:"王权富贵"
    60.             },
    61.             methods:{
    62.                 btn1(){
    63.                     this.count++;
    64.                 },
    65.                 btn2(){
    66.                     alert("这是一个警告弹窗");
    67.                 },
    68.                 chach(){
    69.                     if(this.name==null || this.name ==""){
    70.                         this.mgs="账号不能为空";
    71.                         this.col="red";
    72.                     }else{
    73.                         this.mgs="√";
    74.                         this.col="green";
    75.                     }
    76.                 }
    77.             },
    78.             computed:{
    79.                 surname(){
    80.                     return this.textName.substring(0,2);
    81.                 },
    82.                 lastname(){
    83.                     return this.textName.substring(2);
    84.                 }
    85.             },
    86.             watch:{
    87.                 textName:function(){
    88.                     alert("表单域值发生了变化！")
    89.                 }
    90.             }
    91.         });
    92.     script>
    93. body>
    94. html>

  • 相关阅读:
    springboot项目中json导出成标准接口文档到word（swagger样式）
    公众号接收事件推送
    nacos(一):简介
    C#_查找图片（按键精灵找图）
    Configuration of phpstudy and sqli-labs
    MySql模糊查询大全
    衡量模块独立性的两个标准是什么?各表示什么含义?
    【动态规划】leetcode 96. 不同的二叉搜索树
    【PyTorch】1-基础知识（张量、导数、CUDA）
    创意作品管理软件 Bridge 2024 mac中文版 br2024功能特色
  • 原文地址：https://blog.csdn.net/weixin_62971115/article/details/132708778