欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

有关vue的插值操作与绑定属性

程序员文章站 2022-06-24 11:56:54
插值操作与绑定属性vue实例

当前计数:{{counter}}

...

插值操作与绑定属性与计算属性

vue计数器实例(渐进式,MVVM)

<body>
    <div id="app">
        <h2>当前计数:{{counter}}</h2>
        <!-- <button v-on:click="counter++">+</button> -->
        <!-- <button v-on:click="counter--">-</button> -->
        <button v-on:click="add">+</button>
        <button v-on:click="sub">-</button>
    </div>

</body>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({   //const 修饰类的成员变量,表示成员常量,不能被修改。
        el:"#app",
        data:{
            counter:0
        },
        methods:{
            add:function(){
                // console.log("add被执行");
                this.counter++;
            },
            sub:function(){
                // console.log("sub被执行");
                this.counter--;
            }
        }
    })
</script>

mustache语法

(也就是双大括号)将数据用{{}}插入HTML中,内容插入 (括号内实际就是表达式,可以进行字符串拼接)

体验vue的响应式

v-once

(该指令之后不需要跟任何表达式,比如v-for之后是跟表达式的)

该指令表示元素和组件只渲染一次,不会随着数据的改变而改变

v-html

在某些情况下,我们从服务器请求到的数据本身就是一个Html代码,如果我们直接用{{}}来输出,会将html代码一起输出,但是我们希望按照HTML格式解析并显示相应的内容。

该指令之后往往会跟上一个string类型,会将string的html解析出来并且进行渲染

<body>
<div id="app">
  <h2>{{message}}</h2>
  <h2 v-html="url">{{url}}</h2>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'你好啊!',
            url:'<a href="http://www.baidu.com">百度一下</a>'
        }
    })
</script>

v-text

与mustache相似,都是将数据显示在界面上

  <h2>{{message}},路西</h2>//会拼接起来
  <h2 v-text="message">,luxi</h2>//message内容会覆盖,luxi

v-pre

用于跳过这个元素和它子元素的编译过程,用于显示原本的mustache语法,直接显示{{message}}

v-cloak

在某些情况下,我们浏览器可能会直接显示出未编译的mustache标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    [v-cloak]{
      display: none;
    }
  </style>
</head>
<body>
<div id="app" v-cloak>
  <h2>{{message}},路西</h2>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
  //在vue解析之前。div中由一个属性v-cloak
  //在vue解析之后,div中没有一个属性v-cloak
  setTimeout(function(){
    const app = new Vue({
        el:'#app',
        data:{
            message:'你好啊!',
        }
    })
  },3000);
</script>
</html>

v-bind动态绑定

动态绑定一个或多个属性值,或者向另一个组件传递props值,在开发中,有很多属性需要动态绑定,例如:图片的链接src,网站的链接href,动态绑定一些类和样式等等。语法糖::

<img v-bind:src=“imgURL” alt="">
<a v-bind:href="texturl">百度一下</a>
//语法糖
<img :src=“imgURL” alt="">
<a :href="texturl">百度一下</a>

v-bind绑定class

v-bind动态绑定class(对象语法):可以在class中用键值对的形式,class中的对象会进行合并

数据如果想放在methods的function中,可以在函数中return数值作为class中的属性

:class="{类名:布尔值}"

<h2 :class="{active:isActive,line:isLine}">{{message}}</h2>
<h2 :class="getClasses()">{{message}}</h2>
<button v-on:click="btnclick"></button>
<script>
      const app = new Vue({
          el:'#app',
          data:{
              message:'你好啊!',             		        imgURL:'http://5b0988e595225.cdn.sohucs.com/images/20190505/76ee0659f87543ddaa6d40d536e90571.jpeg',
              texturl:"http://www.baidu.com",
              active: "active",
              isActive:true,
              isLine:true,
          },
          methods:{
            btnclick:function(){
              this.isActive = !this.isActive
            },
            getClasses:function(){
              return [this.active,this.line]
            }
          }
      });
 </script>

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

    <h2 :class="[active1,line1]">{{message}}</h2>     //分清"active"  active

实例1:点击哪个数据即改变其style属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .active{
      color: red;
    }
  </style>
</head>
<body>
<div id="app">
  <ul>
    <li  v-on:click="liclick(index)"  v-for="(item,index) in movies" :class="{active:currentIndex===index}">{{index}}-{{item}}</li>
  </ul>
</div>

</body>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            movies:['机器猫','火影忍者','工作细胞','西西里'],
            isActive:true,
            currentIndex:0,
        },
        methods:{
          liclick(index){
              this.currentIndex=index;
          },
        }
        
    })
    // 如果想要两个方法之间有数据之间的联系,可以在data中设置一个值进行比较,但是函数中利用此值需要用this.进行访问
</script>
</html>

v-bind绑定style

v-bind绑定style(对象语法)

:style="{key(属性名):value(属性值)}" 对象的value可以是具体的赋值,也可以是data中的属性

如果style太长,可以在methods中添加getStyles:function(){return ……} 记得加this

可以动态决定相同组件的不同style形式

<h2 :style="{fontSize:'70px'}">{{message}}</h2>,//注意只能单引号,变成字符串形式
<h2 :style="{fontSize:70px}">{{message}}</h2>//报错 因为会把70px当成是一个变量,去data寻找
<h2 :style="{fontSize:finalSize+'px'}">{{message}}</h2>    //finalSize = 100,
<h2 :style="{fontSize:finalSize}">{{message}}</h2>      //finalSize = 100px,

v-bind绑定style(数组语法)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <h2 :style="[basestyle,basestyle1]">{{message}}</h2>   //数组语法
  <h2 :style="{fontSize:finalSize+'px',color:color}">{{message}}</h2>   //对象语法
</div>
</body>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'你好啊!',
            finalSize:90,
            color:"red",
            basestyle:{backgroundColor:'red'},  //数组语法
            basestyle1:{fontSize:'100px'},
        }
    })
</script>
</html>

计算属性

在模板中可以直接通过插值语法显示一些data中的数据。

但是在某些情况下,需要让数据进行计算转化后再显示(例如总和,除余……)

我们需要把计算属性写在实例中的computed选项中

  computed:{
      totalprice:function(){
        let result=0;
        for(i=0 ; i< this.books.length; i++){
          result += this.books[i].price;
        }
          
          
        for(let i of this.books){
          console.log(i);
          result += i.price;
        }
          
          
        for(let i in this.books){
          console.log(i);
          result += this.books[i].price;
        }
        return result;
      }

  }//计算价钱总和

计算属性的getter setter

每个计算属性都包含一个getter和一个setter,在大多数时候我们都是使用getter读取,在某些情况下也可以提供一个setter方法。

<script>
  const app = new Vue({
    el:'#app',
    data:{
      firstName:'kobe',
      lastName:'Bryant',
    },
    computed:{
      fullName:{
       set:function(newValue){
          console.log('----',newValue);
          const names = newValue.split(' ');
          this.firstName = names[0];
          this.lastName = names[1];
          // console.log(this.firstName);
        },
        get:function(){
          return this.firstName +' '+this.lastName;
      }        
      },

    }
  })
</script>

计算属性的缓存

计算属性相比于方法会有缓存,只在数据改变的时候释放内存并发生调用。

而如果html中多次使用相同的属性,只会进行一次;但methods会多次调用方法造成内存堆积。

v-for遍历 v-on 监听

v-on:click=“sub” === @click=“sub”

<li  v-on:click="liclick(index)"  v-for="(item,index) in movies">{{index}}-{{item}}</li>

本文地址:https://blog.csdn.net/weixin_45860674/article/details/107474882

相关标签: vue javascript