vue的指令

1.v-if判断
2.v-for循环
3.v-model数据的双向绑定

v-on事件属性

实例演示

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title> -->
 <!-- 导入vue -->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-bind:style="style1,style2">{{site}}</p>
<p v-html="messgae"></p>
<p v-text="text1"></p> 
<!-- 不会改变因为页面已经加载了一次显示了1所以无论在改变也不会改变其值 -->
<p v-once>{{one}}</p>
<!-- 会改变 -->
<p>{{one}}</p>
<!-- @click是v-on:click的简称代表点击事件 -->
<button v-on:click="btn">按钮</button>
<input type="text" v-model="one" name=""/>
<!-- v-for循环 -->
<!-- key自定义键属性，主要功能是干扰diff算法 -->
<!-- 遍历数组-->
<p v-for="(index,item) in dogs" :key="index">{{index}}{{item}}</p>
<!-- 遍历对象 -->
<p v-for="(index,prop,item) in users" :key="index">{{index}}{{prop}}{{item}}</p>
<!-- 遍历对象数组 -->
<p v-for="(index,prop,item) in users" :key="index">{{index}}{{prop}}{{item}}</p>
<!-- 单分支判断 -->
<p v-if="flag">{{message}}</p>
<button v-on:click="flag=!flag" v-text="tips=flag?'隐藏':'显示'" ></button>
<!-- 多分支判断 -->
<p v-if="point>=1000&&point<2000">{{grade[0]}}</p>
<p v-else-if="point>=200&&point<100">{{grade[1]}}</p>
<p v-else-if="point>100&&point<50">{{grade[2]}}</p>
<p v-else="point>0&&point<50">{{grade[3]}}</p>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
 data(){
   return{
      site:"我是vue",
     style1:"color:red",
     style2:"background:green",
     messgae:"<h2>我是message</h2>",
     text1:"我是text1",
     one:"1",
     //金牌会员
     point:1000,
     //默认显示，默认隐藏false
     flag:true,
     //数组
     dogs:['jaas','dfkjd'],
     //对象
      users:{name:"xom",age:18,id:1},
      //对象数组
     users:[
      {id:1,name:"xom",age:18},
      {id:2,name:"ming",age:18},
      {id:3,name:"xiaod",age:18},
      {id:4,name:"jing",age:18},
          ]
     }
 },
 methods:{
  btn:function(){
         alert(this.site);
      }
 }
})
</script>
</body>
</html>

计算属性

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>计算属性computed</title>
     <!-- 导入vue -->
     <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head>
<body>
<div id="app">
<p>数量:<input type="number" v-model="num" style="width:300px;" min="0" max="10"/></p>
<p>单价:{{price}}元</p>
<p>金额:{{amount}}</p>
</div>
<script type="text/javascript">
let vm=new Vue({
 el:"#app",
 data(){
 return{
         num:0,
         price:50,
         res:0,
         };
},
computed:{
  amount:{
      // 访问器get属性
      get(){
          return this.num*this.price;
      },
      // 访问器set属性value代表的是amount的值。
      set(value){
          console.log(value);
          if(value>=500){
              this.price=40;
          };
      },
  },
},
});
vm.amount=500;
</script>
</body>
</html>

侦听器属性

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>watch侦听器属性</title>
 <!-- 导入vue -->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>数量:<input type="number" v-model="num" style="width:300px;" min="0" :max="max"/></p>
<p>单价:{{price}}元</p>
<p>金额:{{res}}</p>
</div>
<script type="text/javascript">
let vm=new Vue({
 el:"#app",
 data(){
 return{
         num:0,
         price:50,
         res:0,
         max:100,
         };
},
//侦听器属性
//用来监听某一个属性值的变化，属性名要和data字段中的变量名称相同。
//例如我要监听num变量的变化
//num（新的值，旧的值）
watch:{
 num(newVal,oldVue){
 console.log(newVal,oldVue);
 // this.res=this.num*this.price;
 // this.num--->newVal, this.price;
   this.res=newVal*this.price;
   if(newVal>=20){
       this.max=newVal;
       alert("库存不足");
   },
},
},
});
</script>
</body>
</html>

实例演示,v-if,v-for,v-model,v-bind,v-on,计算属性和侦听器属性

vue的指令

实例演示

计算属性

侦听器属性

更多相关文章

随机推荐