当前位置：移动技术网 > IT编程>脚本编程>vue.js > 有关vue的插值操作与绑定属性

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

2020年07月22日 | 移动技术网IT编程 | 我要评论

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

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 组件简介

什么是组件？web的组件其实就是页面组成的一部分，好比是电脑中的每一个元件（如硬盘、键盘、鼠标），它是一个具有独立的逻辑和功能或界面，同时又能根据规定的接口规则... [阅读全文]
VUE 单页面使用 echart 窗口变化时的用法

在 vue 项目中，为了使 echart 在窗口变化时能够自适应，要用到 window.resize = function(){ .......};但是我在项... [阅读全文]
Vue文本模糊匹配功能如何实现

模糊匹配功能在下拉菜单的组件中用的非常多，于是打算写几个demo看看细节上是如何实现的。一、最简单的模糊匹配：计算属性<!doctype html>... [阅读全文]
在vue中实现嵌套页面(iframe)

vue中嵌套iframe,将要嵌套的文件放在static下面。src可以使用相对路径，也可使用服务器根路径http:localhost:8088/…<if... [阅读全文]
vue实现从外部修改组件内部的变量的值

1、首先是如何给你定义的变量拿到数据：这里我自己用的是vuex：首先在你项目的src文件夹下创建这么一个目录：之后就要在index.js中将homedatas.... [阅读全文]
Vue单文件组件开发实现过程详解

第一步：配置环境安装cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org安装@v... [阅读全文]
vue-cli或vue项目利用HBuilder打包成移动端app操作

一、测试项目是否可以正确运行指令:npm run dev1、首先我们先建立一个vue的项目，本人用的是vue-cli随便建立的，然后运行项目二、修改路径 (a... [阅读全文]
Vue 监听元素前后变化值实例

我就废话不多说了，大家还是直接看代码吧~export default { data() { return { item: '' } }, watch: ... [阅读全文]
VUE实时监听元素距离顶部高度的操作

效果图如下所示.html<div ref="pronbit"> <div>今日热门&... [阅读全文]
vue监听dom大小改变案例

需求描述：layout左边菜单栏收缩，右边的content区域的swiper宽度没有改变（没有图，朋友的问题，大体画一下）类似于点击折叠左边目录会变小，右边内容... [阅读全文]