• Vue——插值操作 、动态绑定属性

    目录

    一、插值操作

    1.Mustache语法

    2. vue列表的展示（v-for）

    3. vue案例-计数器

    4.常用指令v-once

    5.常用指令v-html

    6.常用指令v-text 

    7.常用指令 v-pre

    8.常用指令 v-cloak

    二、动态绑定属性

    1.v-bind指令

    2. v-bind动态绑定class(对象语法)

    3.v-bind和v-for结合

    4 v-bind动态绑定class(数组用法)

    5.v-bind动态绑定style(对象语法)

    6.v-bind动态绑定style(数组语法)

    一、插值操作

    1.Mustache语法

    ​ mustache是胡须的意思，因为{{}}像胡须，又叫大括号语法。

    ​ 在vue对象挂载的dom元素中，{{}}不仅可以直接写变量，还可以写简单表达式。

    1. <body>    
    2.     <div id="app">
    3.         <h2>{{message}}h2>
    4.         <h2>{{message}},worldh2>
    5.      
    6.         <h2>{{firstName+'-'+lastName}}h2>
    7.         <h2>{{firstName}}-{{lastName}}h2>
    8.         <h2>{{firstName+lastName}}h2>
    9.         <h2>{{count*2}}h2>
    10.     div>
    11.     <script>
    12.         Vue.config.productionTip = false;  //阻止 vue 在启动时生成生产提示。
    13.         const vm = new Vue({
    14.             el: '#app',
    15.             data(){
    16.                 return{
    17.                     message: 'hello',
    18.                     firstName:'zhang',
    19.                     lastName:'san',
    20.                     count:2
    21.                 }        
    22.             }
    23.         })
    24.     script>
    25. body>

     2. vue列表的展示（v-for）

    ​     开发中常用的数组有许多数据，需要全部展示或者部分展示，在原生JS中需要使用for循环遍历依次替换div元素，在vue中，使用v-for可以简单遍历生成元素节点。

    1. <div id='app'>
    2.         
    3.         v-for="数组或对象中的每一个值  in/of  数组或对象本身"
    4.  
    5.         
    6.         
    7.  
    8.         
    9.         
    10.  
    11.         <h2 v-for="item of obj2">{{item.a}}{{item.b}}{{item.c}}h2>
    12.         
    13.         <ul>
    14.             <li v-for="item of obj2">{{item.a}}{{item.b}}{{item.c}}li>
    15.         ul>
    16.  
    17.         
    18.         <h2 v-for="(item,index) in todolists" :key="index">{{item}}--{{index}}h2>
    19.  
    20.         <h2 v-for="item in obj2" :key="item.id">{{item.a}}{{item.b}}{{item.c}}h2>
    21. 			
    22.     div>
    23.     <script>
    24.         Vue.config.productionTip = false;
    25.         const vm = new Vue({
    26.             el: '#app',
    27.             data() {
    28.                 return {
    29.                     todolists: ['篮球', '排球', '羽毛球', '足球'],
    30.                     obj: {
    31.                         a: '张三',
    32.                         b: '李四',
    33.                         c: '王五'
    34.                     },
    35.                     obj2: [{
    36.                         id:1,
    37.                         a: '张三'
    38.                     }, {
    39.                         id:2,
    40.                         b: '李四'
    41.                     }, {
    42.                         id:3,
    43.                         c: '王五'
    44.                     }]
    45.                 }
    46.  
    47.             }
    48.         })
    49.     script>
    50.

    item表示当前遍历的元素，index表示元素索引， 为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

    因为它是 Vue 识别节点的一个通用机制，key 并不仅与 v-for 特别关联。

    不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。 

    3. vue案例-计数器

    ​ 使用vue实现一个小计数器，点击+按钮，计数器+1，使用-按钮计数器-1。

    1. 定义vue对象并初始化一个变量count=0

    2. 定义两个方法add和sub，用于对count++或者count--

    3. 定义两个button对象，给button添加上点击事件

      在vue对象中使用methods表示方法集合，使用v-on:click的关键字给元素绑定监听点击事件，给按钮分别绑定上点击事件，并绑定触发事件后回调函数add和sub。也可以在回调方法中直接使用表达式。例如：count++和count--。

    1. <body>
    2.     <div id="app">
    3.         
    4.  
    5.         
    6.         <button type="button" @click="add">+button>
    7.         <h3>{{count}}h3>
    8.         <button type="button" @click="sum">-button>
    9.  
    10.     div>
    11.     <script>
    12.         /* 点击事件
    13.          v-on 监听事件
    14.          */
    15.         Vue.config.productionTip = false;
    16.         new Vue({
    17.             el: '#app',
    18.             data() {
    19.                 return {
    20.                     count: 0
    21.                 }
    22.             },
    23.             methods: { //以后所有的vue中的方法都可以写在methods里面
    24.                 /*  add:function(){
    25.                      // console.log('add');
    26.                      this.count++;
    27.                  },
    28.                  sub:function(){
    29.                      // console.log('sub');
    30.                      this.count--;
    31.                  } */
    32.  
    33.                 add() {
    34.                     /* console.log(this); */
    35.                     this.count++;
    36.                 },
    37.                 sub() {
    38.                     this.count--;
    39.                 }
    40.             }
    41.         })
    42.     script>
    43. body>

     

    4.常用指令v-once

     ​ v-once表示该dom元素只渲染一次，之后数据改变，不会再次渲染。

    1. <body>
    2.     <div id="app">
    3.         <h2>{{msg}}h2>
    4.         
    5.         <h2 v-once>{{msg}}h2>
    6.     div>
    7.     <script>
    8.         Vue.config.productionTip = false;  //阻止 vue 在启动时生成生产提示。
    9.         const vm = new Vue({
    10.             el:'#app',
    11. 				data(){
    12. 					return {
    13. 						msg:'我就是这么倔强'
    14. 					}
    15. 				}
    16.         })
    17.     script>
    18. body>

    上述{{msg}}的msg修改后，第一个h2标签数据会自动改变，第二个h2不会。

    5.常用指令v-html

    ​ 在某些时候我们不希望直接输出百度一下这样的字符串，而输出被html自己转化的超链接。此时可以使用v-html。

    1.     <div id="app">
    2.         <h2 v-html="url">h2>
    3.     div>
    4.     <script>
    5.         const vm = new Vue({
    6.             el:'#app',
    7.             data(){
    8.                 return {
    9.                     url:"百度一下"
    10.                 }
    11.             }
    12.         })
    13.     script>

    6.常用指令v-text 

    ​ v-text会覆盖dom元素中的数据，相当于js的innerHTML方法。

    1.   <div id="app">
    2.     <h2>不使用v-texth2>
    3.     <h2>{{message}}，啧啧啧h2>
    4.     <h2>使用v-text，以文本形式显示,会覆盖h2>
    5.     <h2 v-text="message">，啧啧啧h2>
    6.  
    7.   div>
    8.   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
    9.   <script>
    10.     const app = new Vue({
    11.       el:"#app",
    12.       data:{
    13.         message:"你好啊"
    14.       }
    15.     })
    16.   script>

    ​ 如图所示，使用{{message}}是拼接变量和字符串，而是用v-text是直接覆盖字符串内容。

    7.常用指令 v-pre

    ​  有时候我们期望直接输出{{msg}}这样的字符串，而不是被{{}}语法转化的msg的变量值，此时我们可以使用v-pre标签。

    1. <div id="app">
    2.         <h2>不使用v-preh2>
    3.         <h2>{{msg}}h2>
    4.         <h2>使用v-pre,不会解析h2>
    5.         <h2 v-pre>{{msg}}h2>
    6.     div>
    7.     <script>
    8.         const vm = new Vue({
    9.             el:'#app',
    10.             data(){
    11.                 return {
    12.                     msg:'我比v-once还要厉害'
    13.                 }
    14.             }  
    15.         })
    16.     script>

    ​ 结果如图，使用v-pre修饰的dom会直接输出字符串。

    8.常用指令 v-cloak

     ​ 有时候因为加载延时问题，例如卡掉了，数据没有及时刷新，就造成了页面显示从{{message}}到message变量“你好啊”的变化，这样闪动的变化，会造成用户体验不好。此时需要使用到v-cloak的这个标签。在vue解析之前，div属性中有v-cloak这个标签，在vue解析完成之后，v-cloak标签被移除。简单，类似div开始有一个css属性display:none;，加载完成之后，css属性变成display:block，元素显示出来。

    1. <head>
    2.     <meta charset="utf-8" />
    3.     <title>v-cloak指令的使用title>
    4.     <script src="js/vue.js" type="text/javascript" charset="utf-8">script>
    5.     <style>
    6.         [v-cloak] {
    7.             display: none !important;
    8.         }
    9.     style>
    10. head>
    11.  
    12. <body>
    13.     <div id="app" v-cloak>
    14.         <h2>{{msg}}h2>
    15.     div>
    16.     <script>
    17.         //在vue解析前，div中有一个属性cloak
    18.         //在vue解析之后，div中没有一个属性v-cloak
    19.         setTimeout(() => {
    20.             const vm = new Vue({
    21.                 el: '#app',
    22.                 data() {
    23.                     return {
    24.                         msg: '你好啊'
    25.                     }
    26.                 }
    27.             })
    28.         }, 1000)
    29.     script>
    30. body>

    ​ 这里通过延时1秒模拟加载卡住的状态，结果一开始不显示message的值，div元素中有v-cloak的属性，1秒后显示message变量的值，div中的v-cloak元素被移除。

    二、动态绑定属性

     1.v-bind指令

     ​    某些时候我们并不想将变量放在标签内容中，像这样

    {{msg}}

    是将变量h2标签括起来，类似js的innerHTML。但是我们期望将变量src写在如下位置，想这样导入图片是希望动态获取图片的链接，此时的src并非变量而是字符串src，如果要将其生效为变量，需要使用到一个标签v-bind:，像这样，而且这里也不能使用Mustache语法，类似，这也是错误的。

    1.   <div id="app">
    2.       
    3.       
    4.       
    5.       <img v-bind:src="src" alt="">
    6.       <a v-bind:href="url">a>
    7.  
    8.       <img :src="src" />
    9.       <img :src="url" />
    10.   div>
    11.   <script>
    12.       const vm = new Vue({
    13.          el:'#app',
    14.          data(){
    15.             return {    
    16.                src:'https://cn.bing.com/thid=OIP.NaSKiHPRcquisK2EehUI3gHaE8&pid=Api&rs=1',
    17.                url:'img/6.png'
    18.             }
    19.          }            
    20.      })
    21.   script>

    2. v-bind动态绑定class(对象语法)

    ​ 有时候我们期望对Dom元素的节点的class进行动态绑定，选择此Dom是否有指定class属性。例如，给h2标签加上class="active"，当Dom元素有此class时候，变红，在写一个按钮绑定事件，点击变黑色，再次点击变红色。

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.   <title>v-bind动态绑定class(对象语法)title>
    8.   <style>
    9.     .active{
    10.       color:red;
    11.     }
    12.   style>
    13. head>
    14. <body>
    15.   <div id="app">
    16.     
    17.  
    18.     
    19.     
    20.     <h2 class="title" :class="{active:isActive}">{{message}}h2>
    21.     <h2 class="title" :class="getClasses()">{{message}}h2>
    22.     <button @click="change">点击变色button>
    23.  
    24.   div>
    25.   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
    26.   <script>
    27.     const app = new Vue({
    28.       el:"#app",
    29.       data:{
    30.         message:"你好啊",
    31.         active:"active",
    32.         isActive:true
    33.       },
    34.       methods: {
    35.         change(){
    36.           this.isActive = !this.isActive
    37.         },
    38.         getClasses(){
    39.           return {active:this.isActive}
    40.         }
    41.       },
    42.     })
    43.   script>
    44. body>
    45. html>

    ​ 定义两个变量active和isActive，在Dom元素中使用:class={active:isActive}，此时绑定的class='active'，isActive为true，active显示，定义方法change()绑定在按钮上，点击按钮this.isActive = !this.isActive，控制Dom元素是否有class='active'的属性。 

    3.v-bind和v-for结合

    ​ 使用v-for和v-bind实现一个小demo，将电影列表展示，并点击某一个电影列表时候，将此电影列表变成红色。

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Documenttitle>
    6.     <script src="js/vue.js" type="text/javascript" charset="utf-8">script>
    7.     <style>
    8.         .active {
    9.             color: #f00;
    10.         }
    11.     style>
    12. head>
    13. <body>
    14.     <div id="app">
    15.         <ul>
    16.             
    17.             <li v-for="(item,index) in movies" :key="index" :class="currentIndex==index?'active':''" @click="change(index)">{{item}}li>
    18.         ul>
    19.     div>
    20.     <script>
    21.         const vm = new Vue({
    22.             el: '#app',
    23.             data() {
    24.                 return {
    25.                     currentIndex: 0,
    26.                     movies: ["海王", "海贼王", "火影忍者", "复仇者联盟"]
    27.                 }
    28.             },
    29.             methods: {
    30.                 change(i) {
    31.                     /* 	this.currentIndex = i */
    32.                     if (this.currentIndex == i) return
    33.                     this.currentIndex = i
    34.                 }
    35.             }
    36.         })
    37.     script>
    38. body>
    39. html>

    ​ v-for时候的index索引，给每行绑定事件点击事件，点击当行是获取此行索引index并赋值给currentIndex，使用v-bind:绑定class，当index===currentIndexDom元素有active的class，颜色变红。 

    4 v-bind动态绑定class(数组用法)

    ​ class属性中可以放数组，会依次解析成对应的class。

    1.     <div id="app">
    2.         <h2 :class="['active','aaa']">我们正在学习vueh2>
    3.         <h2 :class="[active,aaa]">我们正在学习vueh2>
    4.         <h2 :class="getStyle()">我们正在学习vueh2>
    5.     div>
    6.     <script>
    7.         /* 数组中加引号和不加引号有区别  
    8.         加引号:表示字符串 是固定的,
    9.         不加引号:表示变量是不固定的 */
    10.         const vm = new Vue({
    11.             el: '#app',
    12.             data() {
    13.                 return {
    14.                     active: 'isactive',
    15.                     aaa: 'bbb'
    16.                 }
    17.             },
    18.             methods: {
    19.                 getStyle() {
    20.                     return [this.active, this.aaa]
    21.                 }
    22.             }
    23.         })
    24.     script>

    5.v-bind动态绑定style(对象语法)

    1.     <div id="app">
    2.         
    3.         
    4.         
    5.         <h2 :style="{fontSize:'50px'}">我们爱学习h2>
    6.         
    7.         
    8.         <h2 :style="{fontSize:fontsize}">我们爱学习h2>
    9.         <h2 :style="getStyle()">我们爱学习h2>
    10.     div>
    11.     <script>
    12.         const vm = new Vue({
    13.             el:'#app',
    14.             data(){
    15.                 return {
    16.                     fontsize:40+'px'
    17.                 }
    18.             },
    19.             methods:{
    20.                 getStyle(){
    21.                     return {fontSize:this.fontsize}
    22.                 }
    23.             }          
    24.         })
    25.     script>

    6.v-bind动态绑定style(数组语法)

    1.     <div id="app">
    2.         <h2 :style="[baseStyle]">我们爱学习h2>
    3.         <h2 :style="['baseStyle']">我们爱学习h2>
    4.         <h2 :style="getStyle()">我们爱学习h2>
    5.     div>
    6.     <script>
    7.         const vm = new Vue({
    8.             el:'#app',
    9.             data(){
    10.                 return {
    11.                   baseStyle:{background:'#f00'}	
    12.                 }
    13.             },
    14.             methods:{
    15.                 getStyle(){
    16.                     return [this.baseStyle]
    17.                 }
    18.             }
    19.         })
    20.     script>

    ​ 类似绑定class，绑定style也是一样的。

  • 相关阅读:
    京东平台数据分析：2023年9月京东扫地机器人行业品牌销售排行榜
    什么是设备运维管理系统？它对企业有什么帮助？
    测试人员为什么也要学习Linux操作系统
    将VS工程转为pro工程及VS安装Qt插件后没有create basic .pro file菜单问题解决
    matlab Lidar Camara Calibrator使用方法及雷达点云对相机的标定
    Python实战-贵州茅台和华能信托股权穿透研究(附完整代码)
    从GPU的内存访问视角对比NHWC和NCHW
    26.XML
    Java中如何使用BufferedInputStream,BufferedOutputStream分批快速读取大文件呢?
    bash例子-source进程替换、alias不生效处理
  • 原文地址：https://blog.csdn.net/m0_46461853/article/details/125999136