• vue用法示例（一）

     1、v-html html 插入，可以插入文本，也可以插入元素，如

    message:"

    xxx

    "

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    6. <script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
    7. </head>
    8. <body>
    9. <div id="app">
    10.         <div v-html="message">zhaocuixia is a beautiful girl!</div>
    11. </div>
    12.  
    13. <script>
    14. new Vue({
    15.   el: '#app',
    16.   data: {
    17.     message: "Hello Vue.js!"
    18.   }
    19. })
    20. </script>
    21. </body>
    22. </html>

    2、v-bind   是属性绑定

    v-bind: 可以简写为：即

    Input 的id和label的for标签实现了点击范围的扩大 

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    6. </head>
    7. <style>
    8. .class1{
    9.   background: #444;
    10.   color: #eee;
    11. }
    12. </style>
    13. <body>
    14. <script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
    15.  
    16. <div id="app">
    17.   <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1" >
    18.   <br><br>
    19.   <div v-bind:class="{'class1': use}">
    20.     v-bind:class 指令
    21.   </div>
    22. </div>
    23.     
    24. <script>
    25. new Vue({
    26.     el: '#app',
    27.   data:{
    28.       use: true
    29.   }
    30. });
    31. </script>
    32. </body>
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    6. <script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
    7. </head>
    8. <body>
    9. <div id="app">
    10.         {{5+5}}<br>
    11.         {{ ok ? 'YES' : 'NO' }}<br>
    12.         {{ message.split('').reverse().join('') }}
    13.         <div v-bind:id="'list-' + id">菜鸟教程</div> 
    14. </div> 
    15.         
    16. <script>
    17. new Vue({
    18.   el: '#app',
    19.   data: {
    20.         ok: true,
    21.     message: 'RUNOOB',
    22.         id : 1
    23.   }
    24. })
    25. </script>
    26. </body>
    27. </html>

    3、v-model双向绑定  比如input是即输入又输出

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    6. <script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
    7. </head>
    8. <body>
    9. <div id="app">
    10.     <p>{{ message }}</p>
    11.     <input v-model="message">
    12. </div>
    13.         
    14. <script>
    15. new Vue({
    16.   el: '#app',
    17.   data: {
    18.     message: 'Runoob!'
    19.   }
    20. })
    21. </script>
    22. </body>
    23. </html>

  • 相关阅读:
    饿了么三面：让你怀疑人生的Spring Boot夺命连环40问
    ADBMS1818驱动程序解析
    十七、CANdelaStudio深入-创建新工程
    【零基础学Python】Day6 Python基本数据类型之Tuple
    JS - WebAPI 基础
    Druid使用详解
    python 斐波那契数列多种方法
    关于python的odl库的相关问题解决
    【ASP.NET Core】MVC模型绑定：自定义InputFormatter读取CSV内容
    简化路径[中等]
  • 原文地址：https://blog.csdn.net/daxiashangxian/article/details/138086249