• vue基本基本语法

    目录

    1、v-bind

    2、v-if...v-else-if...v-else

    v-if函数

    v-if-else 

    v-for循环  

     

    1、v-bind

    除了文本插值，我们还可以像这样来绑定元素 attribute

    1. html>
    2. <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <h1>Javah1>
    10. <div id="app">
    11.     <span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！span>
    12. div>
    13. body>
    15. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
    16. <script>
    17.     var vm = new Vue({
    18.         el: "#app",
    19.         //Model：数据
    20.         data: {
    21.             message: "hello,vue1"
    22.         }
    23.     })
    24. script>
    25. html>

    输出效果：

     

    如果用

    1. vm.message="hello1" 
    2. 'hello1'

     

     

    • 这里我们遇到了一点新东西。你看到的 v-bind attribute 被称为指令。
    • 指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。
    • 可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”。
    • 如果你再次打开浏览器的 JavaScript 控制台，输入 vm2.message = '新消息'，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新。

     

    2、v-if...v-else-if...v-else

    v-if函数

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8.  
    10. <div id="app">
    11.     
    12.     <h1 v-if="ok">Yesh1>
    13.     <h1 v-else>Noh1>
    14. div>
    15.  
    17. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
    18. <script>
    19.     var vm = new Vue({
    20.         el: "#app",
    21.         //Model：数据
    22.         data: {
    23.             ok: true
    24.         }
    25.     })
    26. script>
    27.  
    28. body>
    29. html>

     

    默认是true  

    自己使用进行修改

    1. vm.ok=false
    2.  
    3. false

     

    v-if-else 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    9. <div id="app">
    10.     
    11.     <h1 v-if="type==='A'">Ah1>
    12.     <h1 v-else-if="type==='B'">Bh1>
    13.     <h1 v-else-if="type==='C'">Ch1>
    14.     <h1 v-else>Dh1>
    15. div>
    17. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
    18. <script>
    19.     var vm = new Vue({
    20.         el: "#app",
    21.         //Model：数据
    22.         data: {
    23.             type: 'A'
    24.         }
    25.     })
    26. script>
    27. body>
    28. html>

     

    默认是A

     

    如果使用

    1. vm.type=1
    2. 1

     

    如果使用

    1. vm.type='B'
    2. 'B'
    3. vm.type='C'
    4. 'C'

     

     

    v-for循环  

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    9. <div id="app">
    10.     
    11.     <li v-for="item in items">
    12.         {{item.message}}
    13.     li>
    14. div>
    16. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
    17. <script>
    18.     let vm = new Vue({
    19.         el: "#app",
    20.         //Model：数据
    21.         data: {
    22.             items: [
    23.                 {message: '杉木爱java'},
    24.                 {message: '山姆爱vue'},
    25.                 {message: '山姆爱运维'}
    26.             ]
    27.         }
    28.     });
    29. script>
    30. body>
    31. html>

     

    输出效果： 

     

  • 相关阅读:
    10、学习MySQL LIKE 子句
    《深入浅出WPF》——资源学习
    【用unity实现100个游戏之15】开发一个类保卫萝卜的Unity2D塔防游戏4（附项目源码）
    Ubuntu22.04 在线安装 LAMP
    前端面试题第六天
    2023/9/18 -- C++/QT
    visual studio code(vs code)历史版本下载
    Profinet总线模拟输出模块
    2023宁夏大学计算机考研信息汇总
    RecId
  • 原文地址：https://blog.csdn.net/qq_46423017/article/details/127132018