条件渲染和键盘修饰符

条件渲染

v-if 和 v-show
1.判断指令 v-if

<div id="app">
    <h2>{{msg}}</h2>
</div>
<script>
const vm=new Vue({
    el:"#app",
    data(){
        return {
            msg:"你好！php中文网",
            flag:false,
        };
    }
});
</script>

h2标签隐藏了，因为v-if=”false”
v-if也可以控制流程分支

    <p v-if="point > 1000 && point <2000">{{grade[0]}}</p>
    <p v-if="point >= 2000 && point <3000">{{grade[1]}}</p>
    <p v-if="point >=3000 && point <4000">{{grade[2]}}</p>
    <p v-if="point >=4000 ">{{grade[3]}}</p>
    <p v-else>{{grade[4]}}</p>
<script>
        // v-if是判断
        // v-show是显示隐藏
      const vm=new Vue({
          el:document.querySelector("#app"),
          data(){
              return {
               msg:'你好！php中文网',
               flag:true,
               tips:'隐藏',
               point:2500,
               grade:[
                 "木头会员",
                 "石头会员",
                 "金牌会员",
                 "终身会员",
                 "只对会员开发"
               ],
              };
          }
      });
    </script>

1. v-show指令
   控制显示与隐藏

<p v-show="status">v-show</p>
  const vm=new Vue({
          el:document.querySelector("#app"),
          data(){
              return {
               status:false,
              };
          }
});

键盘修饰符

    <div id="app">
        //键盘修饰符
<input type="text" @keyup.enter="submit($event)">
<ul>
    <li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
    const vm=new Vue({
       el:'#app',
       data(){
           return{
             list:[],
           }
       },
       methods:{
           submit(ev){
            //    判断按下enter键后才添加
            // if(ev.key==="Enter"){
            //    this.list.unshift(ev.target.value);
            //    ev.target.value=null;
            // }
            this.list.unshift(ev.target.value);
            ev.target.value=null;
           },
       }
    });
</script>

input事件 @keyup.enter 指摁下enter键，不用再代码里再判断enter了。

计算属性

实现输入数量直接算出结果
1.添加事件实现

<div id="app">
        <p>数量:<input type="text" v-model="num" min="0" @change="calc"></p>
        <p>单价：{{price}}</p>
        <p>金额:{{res}}元</p>
         <p>金额:{{amount}}元</p>
  </div>
<script>
const vm=new Vue({
            el:"#app",
            data(){
                return{
                   num:0,
                   price:50,
                   res:0,
                };
            },
          methods:{
             calc(){
             this.res=this.num*this.price;
             }
          }
</script>

1. 计算属性实现

computed:{
//默认是get方法，直接得到数据
//amount(){
// return this.num*this.price;
// }
//get和set方法
amount:{
  get(){
    return this.num*this.price;
}
set(value){
//设置值
}
}
}
vm.amount=100;就是set(value)的value值

注意：计算属性 最终会和data合并，所以不要和data中已有的属性重名

3.侦听器属性实现

watch:{
//监听已有的属性值的变化，它的属性名和data中要监听的属性同名
num(newV,oldV){
this.res=this.newV*this.price;
//nweV表示新值，oldV表示旧值
 },
},

侦听器比较适合时时变化的数据。