• vue模板语法上集

    目录

    一、插值

     

    二、指令

    三 、过滤器

    四、计算属性&监听属性

    一、插值

     

    文本： {{msg}}

    html: 使用v-html指令用于输出html代码          

    属性：HTML属性中的值应使用v-bind指令

    表达式:

     Vue提供了完全的JavaScript表达式支持

              {{str.substr(0,6).toUpperCase()}}

              {{ number + 1 }}

              {{ ok ? 'YES' : 'NO' }}

             

  • 我的Id是js动态生成的

    •  class绑定

              使用方式：v-bind:class="expression"

              expression的类型：字符串、数组、对象

     style绑定

             v-bind:style="expression"

             expression的类型：字符串、数组、对象

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    6.     <title>Title</title>
    7.     <style>
    8.         .a{
    9.             color:yellow;
    10.         }
    11.     </style>
    12.  
    13.  
    14. </head>
    15. <body>
    16.     <div id="app">
    17.         <p>文本</p>
    18.         {{msg}}
    19.         <p>html页面转义</p>
    20.         <div v-html="htmlstr"></div>
    21.         <p> v-bind 属性绑定</p>
    22.         <input value="值">
    23.         <input v-bind:value="valuestr" />
    24.         <input :value="valuestr" />
    25.         <p>vue中可以对变量进行二次处理</p>
    26.         {{str.substring(0,4)}}<br>
    27.         {{num + 4}}<br>
    28.         {{ok ? '1' : '0'}}<br>
    29.         <span :id="idstr+'1'">书籍信息</span>
    30.         <p>calss绑定</p>
    31.         <span :class="classStr">文本类容</span>
    32.         <p>calss绑定</p>
    33.         <span :class="styleStr">文本类容</span>
    34.  
    35.  
    36.  
    37.     </div>
    38. </body>
    39. <script type="text/javascript">
    40.     new Vue({
    41.             el:'#app',
    42.             data(){
    43.                 return{
    44.                     msg:'hello vue!!!',
    45.                     htmlstr:'文本内容',
    46.                     valuestr:'vue值',
    47.                     str:'hello world',
    48.                     num:6,
    49.                     ok:false,
    50.                     idstr:'book_',
    51.                     classStr:'a',
    52.                     styleStr:'color:blue;'
    53.                 }
    54.             }
    55.     })
    56.  
    57. </script>
    58. </html>

    测试：

    二、指令

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    6.     <title>Title</title>
    7.  
    8. </head>
    9. <body>
    10.     <div id="app">
    11.         <p>v-if</p>
    12.         <!--输入分数，60分一下不及格、60-70分为合格、80-90为优秀、90分以上为优+ -->
    13.         请输入分数：<input v-model="score"/>
    14.         对应的结果：
    15.         <span v-if="score<60">不及格</span>
    16.         <span v-else-if="score<70">合格</span>
    17.         <span v-else-if="score<80">良</span>
    18.         <span v-else-if="score<90">优秀</span>
    19.         <span v-else-if="score<=100">优+</span>
    20.         <span v-else="">输入不合法</span>
    21.         <p>v-show</p>
    22.         请输入结果:<input v-model="showflag" />
    23.         <span v-show="showflag">show:展示与否</span>
    24.         <span v-if="showflag">if:展示与否</span>
    25.         <p>v-for</p>
    26.         <select >
    27.             <option v-for="l in likes" :value="l.id" name>{{l.name}}</option>
    28.         </select>
    29.         <br>
    30.         <div v-for="l in likes">
    31.             <input  type="checkbox" :value="l.id" name>{{l.name}}
    32.         </div>
    33.  
    34.  
    35.     </div>
    36. </body>
    37. <script type="text/javascript">
    38.     new Vue({
    39.             el:'#app',
    40.             data(){
    41.                 return{
    42.                     score:0,
    43.                     showflag:false,
    44.                     likes:[
    45.                         {id:1,name:'网吧'},
    46.                         {id:1,name:'酒吧'},
    47.                         {id:1,name:'清吧'},
    48.                         {id:1,name:'茶吧'}
    49.                     ]
    50.                 }
    51.             }
    52.     })
    53.  
    54. </script>
    55. </html>

    测试：

    三 、过滤器

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    6.     <title>Titletitle>
    7.  
    8. head>
    9. <body>
    10.     <div id="app">
    11.         
    12.         
    13.         {{msg | zxw | zxw2}}
    14.         
    15.         {{msg | zxw3(2,5)}}
    16.         {{msg | zxw3(1,4)}}
    17.  
    18.     div>
    19. body>
    20. <script type="text/javascript">
    21.     Vue.filter('zxw',function(value){
    22.         console.log(value);
    23.         return value.substring(0,5);
    24.     })
    25.     Vue.filter('zxw2',function(value){
    26.         debugger;
    27.         console.log(value);
    28.         return value.substring(3,5);
    29.     })
    30.     Vue.filter('zxw3',function(value,a,b){
    31.         debugger;
    32.         console.log(value);
    33.         return value.substring(a,b);
    34.     })
    35.     new Vue({
    36.             el:'#app',
    37.             data(){
    38.                 return{
    39.                     msg:'hello vue!!!'
    40.                 }
    41.             }
    42.     })
    43.  
    44. script>
    45. html>

    测试：

    四、计算属性&监听属性

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    6.     <title>Title</title>
    7.  
    8. </head>
    9. <body>
    10.     <div id="app">
    11.         <p>计算属性</p>
    12.         请输入第一个数:<input v-model="x" /><br>
    13.         请输入第二个数:<input v-model="y" /><br>
    14.         结果为:{{addFlag}}
    15.         <p>监听属性</p>
    16.         请输入千米:<input v-model="km" /><br>
    17.         请输入米:<input v-model="m" /><br>
    18.  
    19.  
    20.     </div>
    21. </body>
    22. <script type="text/javascript">
    23.     new Vue({
    24.             el:'#app',
    25.             data(){
    26.                 return{
    27.                     x:0,
    28.                     y:0,
    29.                     km:0,
    30.                     m:0
    31.                 }
    32.             },computed:{
    33.                 // 计算属性
    34.                 addFlag:function () {
    35.                     return parseInt(this.x)   + parseInt(this.y)
    36.                 }
    37.              },
    38.         watch:{
    39.                 //当前对应的是被监听的属性、v指的是被监听属性的值
    40.                 //当v对应的值发生变化的时候、会执行这个方法
    41.                 //v代表的是千米
    42.                 km:function(v){
    43.                     this.m = parseInt(v)*1000;
    44.                 },
    45.  
    46.                 m:function(v) {
    47.                     this.km = parseInt(v)/1000;
    48.                 }
    49.             }
    50.     })
    51.  
    52. </script>
    53. </html>

     测试：

     

  • 相关阅读:
    CSS 基础知识-02
    vue3.0 如何自定义指令
    java技术专家面试指南80问【java学习+面试宝典】（三）
    深入理解深度学习——Transformer：基础知识
    虚拟机磁盘扩容及重新分区方法
    Python-使用openpyxl读取excel内容
    半导体物理 2022.9.29
    前端基础学习笔记
    Linux之yum/git的使用
    如何做好测试？（五）性能测试（Performance Testing, PT）
  • 原文地址：https://blog.csdn.net/m0_62327548/article/details/126669698