• Vue框架中的各种指令(续)

    • v-model="变量"undefined 让控件的值和变量进行双向绑定undefined 控件的值改变变量的值会跟着改变undefined同时变量的值改变也会影响控件的值undefined 应用场景: 当需要获取控件的值的时候使用双向绑定

    • v-for="(对象undefined下标) in 数组" 让显示的元素内容和数组进行绑定

    • v-if="变量" 让元素是否显示和变量进行绑定undefined true显示undefined false不显示(删除元素)

    • v-else 让元素的显示状态和v-if元素的状态相反

    • v-show="变量" 让元素是否显示和变量进行绑定undefined true显示undefined false不显示(隐藏)

    • v-on:事件名="方法" 事件绑定undefined 绑定的方法必须写在Vue对象中的methods属性里面undefined @事件名="方法" 简写

    ElementUI

    • 目前比较流行的前端框架undefined 基于HTMLundefinedCSSundefinedJavaScriptundefinedVue的一款前端框架undefined 可以让程序员高效的开发出前端页面

    自定义模板代码

     双向绑定

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <div>
    9.     
    10.   <input type="text" v-model="info">
    11.   <h1>{{info}}h1>
    12.     <hr>
    13.     <input type="text" v-model="user.username" placeholder="请输入用户名">
    14.     <input type="password" v-model="user.password" placeholder="请输入密码">
    15. div>
    16. <script src="../day05/js/vue.min.js">script>
    17. <script>
    18.     let v = new Vue({
    19.         el:"body>div",
    20.         data:{
    21.             info:"双向绑定测试",
    22.             user:{
    23.                 username:"",
    24.                 password:""
    25.             }
    26.         }
    27.     })
    28. script>
    29.  
    30. body>
    31. html>

    事件绑定

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <div>
    9.   <input type="text" v-model="info">
    10.   
    11.   <input type="button" value="按钮1" @click="f()">
    12.   
    13.   <input type="button" value="按钮2" v-on:click="f1()">
    14. div>
    15. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    16. <script>
    17.    let v = new Vue({
    18.      el:"body>div",
    19.      data:{
    20.         info:""
    21.      },
    22.      methods:{
    23.        f(){
    24.          alert(v.info);
    25.        },
    26.        f1(){
    27.          alert("按钮2点击了!");
    28.        }
    29.      }
    30.    })
    31.  
    32. script>
    33.  
    34. body>
    35. html>

    循环遍历

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <div>
    9.   <ul>
    10.     
    11.     <li v-for="name in arr" >{{name}}li>
    12.   ul>
    13.     <table border="1">
    14.         <caption>人物列表caption>
    15.         <tr>
    16.             <th>编号th><th>名字th><th>年龄th><th>类型th>
    17.         tr>
    18.         <tr v-for="(p,i) in persons">
    19.              <td>{{i+1}}td><td>{{p.name}}td><td>{{p.age}}td><td>{{p.type}}td>
    20.         tr>
    21.     table>
    22.     <table border="1">
    23.         <caption>员工列表caption>
    24.         <tr>
    25.             <th>编号th>
    26.             <th>姓名th>
    27.             <th>工作th>
    28.             <th>工资th>
    29.         tr>
    30.         <tr v-for="(emp,i) in empArr">
    31.             <td>{{i+1}}td>
    32.             <td>{{emp.name}}td>
    33.             <td>{{emp.job}}td>
    34.             <td>{{emp.salary}}td>
    35.         tr>
    36.     table>
    37.  
    38. div>
    39. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    40. <script>
    41.    let v = new Vue({
    42.      el:"body>div",
    43.      data:{
    44.         arr:["刘备","关羽","张飞"],
    45.          persons:[{name:"孙悟空",age:500,type:"打野"},
    46.              {name:"猪八戒",age:300,type:"战士"},
    47.              {name:"牛魔王",age:100,type:"辅助"}],
    48.          empArr:[{name:"张三",job:"销售",salary:5000,age:30},
    49.              {name:"李四",job:"人事",salary:3000,age:20},
    50.              {name:"王五",job:"出纳",salary:4000,age:22},
    51.              {name:"赵六",job:"程序员",salary:15000,age:34}]
    52.      }
    53.    })
    54. script>
    55. body>
    56. html>

    显示隐藏相关

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <div id="d1">
    9.   
    10.   <h1 v-if="isVisible">刘德华h1>
    11.   
    12.   <h1 v-else>张学友h1>
    13.   
    14.   <h1 v-show="isVisible">周杰伦h1>
    15. div>
    16. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    17. <script>
    18.    let v = new Vue({
    19.      el:"#d1",   //element元素
    20.      data:{
    21.         isVisible:true
    22.      }
    23.    })
    24. script>
    25. body>
    26. html>

  • 相关阅读:
    vue + video.js 加载多种视频流（HLS、FLV、RTMP、RTSP）
    HCNP Routing&Switching之DHCP安全
    论文阅读：Efficient Point Cloud Segmentation with Geometry-Aware Sparse Networks
    touchGFX综合学习十三、基于cubeMX、正点原子H750开发版、RGB4.3寸屏移植touchGFX完整教程+工程（一）
    分享tushare的使用方法
    js 连接快手打印组件并实现打印
    python的os模块常用函数介绍
    Latex笔记
    中国油烟机行业深度发展研究与“十四五”企业投资战略规划报告
    【ubuntu】chmod命令
  • 原文地址：https://blog.csdn.net/weixin_70634087/article/details/126610508