• 5.Vue2-模板语法

    题记

            vue2的模板语法

    插值

    文本
    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>实例title>
    6. <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js">script>
    7. head>
    8. <body>
    9. <div id="app">
    10.   <p>{{ message }}p>
    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>
    html
    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>实例title>
    6. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    7. head>
    8. <body>
    9. <div id="app">
    10.     <div v-html="message">div>
    11. div>
    12. 	
    13. <script>
    14. new Vue({
    15.   el: '#app',
    16.   data: {
    17.     message: '
      ngxe
      '
    18.   }
    19. })
    20. script>
    21. body>
    22. html>
    属性
    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>实例title>
    6. head>
    7. <style>
    8. .class1{
    9.   background: #444;
    10.   color: #eee;
    11. }
    12. style>
    13. <body>
    14. <script src="https://cdn.staticfile.org/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: false
    29.   }
    30. });
    31. script>
    32. body>
    表达式
    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>实例title>
    6. <script src="https://cdn.staticfile.org/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">ngxediv>
    14. div>
    15. 	
    16. <script>
    17. new Vue({
    18.   el: '#app',
    19.   data: {
    20. 	ok: true,
    21.     message: 'ngxe',
    22. 	id : 1
    23.   }
    24. })
    25. script>
    26. body>
    27. html>

    指令

    v-if 
    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>实例title>
    6. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    7. head>
    8. <body>
    9. <div id="app">
    10.     <p v-if="seen">现在你看到我了p>
    11.     <template v-if="ok">
    12.       <h1>ngxeh1>
    13.     template>
    14. div>
    15.     
    16. <script>
    17. new Vue({
    18.   el: '#app',
    19.   data: {
    20.     seen: true,
    21.     ok: true
    22.   }
    23. })
    24. script>
    25. body>
    26. html>

     参数

     vi-bind
    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>实例title>
    6. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    7. head>
    8. <body>
    9. <div id="app">
    10.     <pre><a v-bind:href="url">ngxea>pre>
    11. div>
    12. 	
    13. <script>
    14. new Vue({
    15.   el: '#app',
    16.   data: {
    17.     url: 'http://www.bing.com'
    18.   }
    19. })
    20. script>
    21. body>
    22. html>
     v-on

    修饰符 

     

    用户输入 

    v-model
    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>实例title>
    6. <script src="https://cdn.staticfile.org/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: 'ngxe'
    19.   }
    20. })
    21. script>
    22. body>
    23. html>
    v-on
    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>实例title>
    6. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    7. head>
    8. <body>
    9. <div id="app">
    10.     <p>{{ message }}p>
    11.     <button v-on:click="reverseMessage">反转字符串button>
    12. div>
    13. 	
    14. <script>
    15. new Vue({
    16.   el: '#app',
    17.   data: {
    18.     message: 'ngxe'
    19.   },
    20.   methods: {
    21.     reverseMessage: function () {
    22.       this.message = this.message.split('').reverse().join('')
    23.     }
    24.   }
    25. })
    26. script>
    27. body>
    28. html>

    过滤器

    语法


    {{ message | capitalize }}


    实例 
    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>实例title>
    6. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    7. head>
    8. <body>
    9. <div id="app">
    10.   {{ message | capitalize }}
    11. div>
    12. 	
    13. <script>
    14. new Vue({
    15.   el: '#app',
    16.   data: {
    17. 	message: 'ngxe'
    18.   },
    19.   filters: {
    20.     capitalize: function (value) {
    21.       if (!value) return ''
    22.       value = value.toString()
    23.       return value.charAt(0).toUpperCase() + value.slice(1)
    24.     }
    25.   }
    26. })
    27. script>
    28. body>
    29. html>
     串联

    {{ message | filterA | filterB }} 

    接受参数 

    {{ message | filterA('arg1', arg2) }} 

    缩写 

    v-bind 

     


    v-on 




     

    后记 

            觉得有用可以点赞或收藏！

  • 相关阅读:
    【Jenkins】调用API构建并钉钉通知
    基于slate构建文档编辑器
    dns网络服务器未响应是什么原因（如果各自方法都尝试后无法使用，请尝试重启猫）
    RocketMQ—RocketMQ消费重试和死信消息
    2022祥云杯---Crypto
    【Element-plus】如何让滚动条永远在最底部（支持在线演示）
    kafka中AR、ISR、OSR以及HW、LEO的区别
    Spring Boot关掉APR
    常见的linux命令
    CCF秀湖会议：“第五存储架构”引发关注
  • 原文地址：https://blog.csdn.net/m0_70819559/article/details/134078812