• Welcome to the world's largest Chinese hacker forum

    Welcome to the world's largest Chinese hacker forum, our forum registration is open! You can now register for technical communication with us, this is a free and open to the world of the BBS, we founded the purpose for the study of network security, please don't release business of black/grey, or on the BBS posts, to seek help hacker if violations, we will permanently frozen your IP and account, thank you for your cooperation. Hacker attack and defense cracking or network Security

    business please click here: Creation Security  From CNHACKTEAM

Recommended Posts

1.计算属性

1.1姓名案例,插值语法实现

当改变姓和名的时候,姓名跟着一起改变

!声明文档类型

html lang='en '

meta charset='UTF-8 '

标题标题/标题

脚本src='./js/vue.js'/script

/头

身体

div id='root '

姓:input type=' text ' v-model=' first name ' br

名:input type=' text ' v-model=' last name ' br

姓名:span{{ ' '名字姓氏} span

/div

脚本

vue。配置。生产提示=假;

新Vue({

el:'#root ',

数据:{

名字: '张,

姓氏: '三'

}

})

/脚本

/body

/html

1.2姓名案例,方法实现

!声明文档类型

html lang='en '

meta charset='UTF-8 '

标题标题/标题

脚本src='./js/vue.js'/script

/头

身体

div id='root '

姓:input type=' text ' v-model=' first name ' br

名:input type=' text ' v-model=' last name ' br

!全名的话就是将这个函数代码插入,全名()就是将函数的返回值插入,差别是比较大的,绑定事件的函数里面,有没有括号都一样,但是这里不一样-

姓名:span { {全名(}}/span

/div

脚本

vue。配置。生产提示=假;

const vm=new Vue({

el:'#root ',

数据:{

名字: '张,

姓氏: '三'

},

方法:{

全名(){

//这个虚拟机.是不可以的,因为这是在初始化之前进行,这里面的就是初始化的内容

//返回VM。名字虚拟机。姓氏;

                return  this.firstname+this.lastname;
              }
          }
        })

   </script>
</body>
</html>

1.3姓名案例,计算属性实现

  • fullname的话就是将这个函数代码插入,fullname()就是将函数的返回值插入,差别是比较大的,绑定事件的函数里面,有没有括号都一样,但是这里不一样

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="../js/vue.js"></script>
</head>
<body>
   <div id="root">
      姓:<input type="text" v-model="firstname"><br>
      名:<input type="text" v-model="lastname"><br>
<!--       fullname的话就是将这个函数代码插入,fullname()就是将函数的返回值插入,差别是比较大的,绑定事件的函数里面,有没有括号都一样,但是这里不一样-->
      姓名:<span>{{fullname}}</span>

   </div>

   <script>
       Vue.config.productionTip = false;
       const vm = new Vue({
           el:'#root',
           //vue认为data中的东西都是属性
           data:{
               firstname:'张',
               lastname:'三'
          },
           methods:{
               fullName(){
                  // 这个vm.是不可以的
                  // return ''+vm.firstname+vm.lastname;
                  return  this.firstname+this.lastname;
              }
          },
           //自己理解:计算属性就是将data中的东西进行一定的计算与配置
           computed:{
               //因为计算属性的过程比较复杂,所以要求将计算属性的过程配置为一个对象
               fullname:{
                   //当有人读取fullname时,get就会被调用,且返回值作为fullname的值
                   //get什么时候调用?1.初次读取fullname时 2.所依赖的数据发生变化
                   //和计算属性相比,只要第一次调用会调用get,然后就会缓存,多次调用该函数时可以直接用
                   get(){
                       return this.firstname+'-'+this.lastname;
                  },
                   //set什么时候调用?1.修改fullname时
                   //要求:将读取过来的姓名拆成姓和名
                   set(value){
                       const arr = value.split('-');
                       this.firstname = arr[0];
                       this.lastname = arr[1];
                  }
              }
          }

        })
   </script>
</body>
</html>

1.4计算属性简写方式

只有当计算属性只读不改的时候才可以用简写方式,也就是我们上面1.2个例子,只进行姓名的显示,并没有用到set方法

//简写前提,只有get,没有set,只读不改
computed:{
   fullname(){
           return this.firstname+'-'+this.lastname;
      }
}

2.监视属性

2.1天气案例

  • 点击切换天气

 

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="../js/vue.js"></script>
</head>
<body>
   <div id="root">
       <h2>今天的天气很{{ifHot}}</h2>
       <button type="button" @click="changebit">按键切换天气</button>
   </div>

   <script>
       Vue.config.productionTip = false;
       new Vue({
           el:'#root',
           data:{
               isHot:true
          },
           methods:{
               changebit(){
                   //每点击一次取反
                   this.isHot = !this.isHot;
              }
          },
           //要注意,这里的ifhot()并不是一个方法,而是一个对象,只是可以这么简写
           computed:{
               ifHot(){
                   return this.isHot?'炎热':'凉爽';
              }
          }
        })
   </script>
</body>
</html>

2.2天气案例用监视属性写

2.2.1将watch写在vue内和vue外

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="../js/vue.js"></script>
</head>
<body>
   <div id="root">
       <h2>今天的天气很{{ifHot}}</h2>
       <button type="button" @click="changebit">按键切换天气</button>
   </div>

   <script>
       Vue.config.productionTip = false;
       const vm = new Vue({
           el:'#root',
           data:{
               isHot:true
          },
           methods:{
               changebit(){
                   //每点击一次取反
                   this.isHot = !this.isHot;
              }
          },
           //要注意,这里的ifhot()并不是一个方法,而是一个对象,只是可以这么简写
           computed:{
               ifHot(){
                   return this.isHot?'炎热':'凉爽';
              }
          },
           //监测属性,监视谁就写谁的名字
           // watch:{
           //     isHot:{
           //         //1.handler什么时候被调用,当监视的属性被修改的时候
           //         //2.还能将修改之前的值和修改之后的值给我
           //         // 2.1handler(x,y){
           //         //     console.log('ishot被修改了',x,y);
           //         // }
           //         // 结果就是ishot被修改了 false true
           //         //3.除了handler配置还有其他配置imediateimmediate:true,
           //         // 3.1初始化是让handler调用一下
           //         //4.计算出来的也是属性,computed里面的呢东西也能监视
           //         immediate:true,
           //         handler(x,y){
           //             console.log('ishot被修改了',x,y);
           //         }
           //     }
           // }
        })

       //这样子写也可以
       // vm.$watch('isHot',{
       //     immediate:true,
       //     handler(x,y){
       //         console.log('ishot被修改了',x,y);
       //     }
       // })
   </script>
</body>
</html>

2.2.2注意事项

 

Link to comment
Share on other sites