search

博客列表 >vue2基础语法2与监听属性和计算属性

vue2基础语法2与监听属性和计算属性

月光下，遗忘黑暗
月光下，遗忘黑暗原创
2021年04月17日 11:33:26712浏览

1.v-bind v-on

为元素绑定普通属性和事件

代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>vue属性指令</title>
  6. </head>
  7. <body>
  8.     <div class="app">
  9.         <p v-bind:style="color1">{{site}}</p>
  10. <!--        v-bind:可简化为":"，为元素绑定普通属性-->
  11.         <p :style="color2,style3">{{site}}</p>
  12.         <p v-bind:style = "['background : red']">{{site}}</p>
  13. <!--        <p><a href="https://www.baidu.com" v-on:click="show">网站2</a></p>-->    <!--     v-on 指令用于绑定HTML事件    -->
  14. <!--        prevent:修饰符，防止默认行为-->
  15.         <p onclick="console.log(this.tagName)"><a href="https://www.baidu.com" v-on:click.prevent="show">网站2</a></p>
  16. <!--        防止冒泡stop-->    <!--  @为v-on：简写-->
  17.         <p onclick="console.log(this.tagName)"><a href="https://www.baidu.com" @click.prevent.stop="show">网站2</a></p>
  18. <!--        事件传参 -->
  20.         <button @click.stop="calc($event,10,1)">计算10 + 1 =  ？ </button>
  21.         {{result}}
  22.     </div>
  23.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  24.     <script>
  25.         const vm = new Vue({
  26.             el : '.app',
  27.             data : {
  28.                 site : 'hello',
  29.                 color1 : 'color : red',
  30.                 color2 : 'color : green',
  31.                 style3 : 'background : yellow',
  32.                 result : 0,
  33.             },
  34.             //事件方法
  35.             methods: {
  36.                 show() {
  37.                     // this -->vue实例
  38.                     console.log(this);
  39.                    // debugger;
  41.                 },
  42.                 calc(ev,x,y) {
  43.                     this.result = x+y;
  44.                 }
  45.             }
  46.         });
  48.     </script>
  49. </body>
  50. </html>

效果

2.v-model

双向绑定

代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>双向绑定v-model</title>
  6. </head>
  7. <body>
  8. <div class="app">
  9.     <p>模型中的数据：{{site}}</p>
  10.     <p>双向绑定 <input type="text" :value="site" @input="site=$event.target.value"></p>
  11. <!--    vue双向绑定v-model-->
  12.     <hr>
  13.     <p>双向绑定/实时更新 <input type="text"  v-model="site"></p>
  14.     <hr>
  15. <!--    延迟更新绑定，修饰符：lazy-->
  16.     <p>双向绑定/延迟更新绑定 <input type="text"  v-model.lazy="site"></p>
  17. </div>
  18. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  19. <script>
  20.     const vm = new Vue({
  21.        el : '.app',
  22.        data : {
  23.            site : 'hello'
  24.        },
  25.     });
  26. </script>
  27. </body>
  28. </html>

效果

3.v-for,v-if,v-show

代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>列表渲染,v-for,v-if,v-show</title>
  6. </head>
  7. <body>
  8. <div class="app">
  9. <!--遍历数组-->
  10.     <ul>
  11.         <li>{{items[0]}}</li>
  12.         <li>{{items[1]}}</li>
  13.         <li>{{items[2]}}</li>
  14.         <hr>
  15. <!--        v-for = for of-->
  16. <!--        :key 自定义键属性，主要是干扰diff算法-->
  17.         <li v-for="(item,index) in items" :key="index">{{index}}=>{{item}}</li>
  18.         <hr>
  19. <!--        遍历对象-->
  20.         <li v-for="(item,prop,index) in user" :key="prop">{{prop}}=>{{item}}</li>
  21.         <hr>
  22. <!--        遍历对象数组-->
  23.         <li v-for="(item,index) in users" :key="index">{{item.email}}=>{{item.name}}</li>
  24.     </ul>
  25.     <p v-if="flag">{{msg}}</p>
  26.     <button @click="flag = !flag" v-text="tips = flag ? `影藏` : `显示`"></button>
  28.     <p v-if="point > 1000 && point < 2000">{{grade[0]}}</p>
  29.     <p v-else-if="point >= 2000 && point < 3000">{{grade[1]}}</p>
  30.     <p v-else-if="point >= 3000 && point < 4000">{{grade[2]}}</p>
  31.     <p v-else-if="point >= 4000 && point < 5000">{{grade[3]}}</p>
  32.     <p v-else-if="point >= 5000">{{grade[4]}}</p>
  33.     <p v-else>{{grade[5]}}</p>
  34.     <p v-show="status">前端即将结束</p>
  35. </div>
  36. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  37. <script>
  38.     // v-for : (循环变量，索引/键) in/of :key
  39.     new Vue({
  40.         el : '.app',
  41.         data (){
  42.             return  {
  43.                 //数组
  44.                 items : ['深圳','东莞','广州'],
  45.                 //对象
  46.                 user : {
  47.                     name : '张飞',
  48.                     email : '306032534@qq.com'
  49.                 },
  50.                 //对象数组
  51.                 users　: [
  52.                     {name : '张飞', email : '306032534@qq.com'},
  53.                     {name : '刘备', email : '2571767701@qq.com'}
  54.                 ],
  55.                 flag : true,
  56.                 msg  : 'hello',
  57.                 tips : '影藏',
  58.                 grade : ['纸片会员','木头会员','石块会员','铁片会员','钢板会员','非会员'],
  59.                 point : 2000,
  60.                 status : false
  61.             }
  63.         }
  64.     })
  65. </script>
  66. </body>
  67. </html>

效果

4.键盘修饰符 v-on:keyup=”submit()”

代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>键盘修饰符：todolist</title>
  6. </head>
  7. <body>
  8. <div class="app">
  9.     <input type="text" @keyup.enter ='submit($event)'>
  10. <!--    enter:回车键的修饰符-->
  11.     <ul>
  12.         <li v-for="(item,index) in list" :key="index">{{item}}</li>
  13.     </ul>
  14. </div>
  15. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  16. <script>
  17.     new Vue({
  18.         el : '.app',
  19.         data() {
  20.             return {
  21.                 list : []
  22.             }
  23.         },
  24.         methods : {
  25.             submit(ev) {
  26.                 // console.log(ev.key)
  27.                 // if(ev.key === 'Enter') {
  28.                 //     this.list.unshift(ev.target.value);
  29.                 //     ev.target.value = null;
  30.                 // }
  31.                 this.list.unshift(ev.target.value);
  32.                 ev.target.value = null;
  33.             }
  34.         }
  35.     })
  36. </script>
  37. </body>
  38. </html>

效果

5.计算属性与监听属性

计算属性

代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>计算属性</title>
  6. </head>
  7. <body>
  8. <div class="app">
  9.     <p> 数量：    <input type="number" v-model="num" style="width:5em" min="0" ></p>
  10.     <p>单价：{{price}}</p>
  11. <!--    <p>金额： {{num * price}}</p>-->
  12.     <p>金额：{{amount}}</p>
  14. </div>
  15. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  16. <script>
  17.    const vm =  new Vue({
  18.         el : '.app',
  19.         data() {
  20.             return {
  21.                 num : 0,
  22.                 price : 50,
  23.                 res : 0
  24.                 // 这里只能赋初值
  25.             }
  26.         },
  27.         // 计算属性
  28.         computed : {
  29.             amount :  {
  30.                 //访问器属性get（）
  31.                 get() {
  32.                     return this.num * this.price
  33.                 },
  34.                 set(value) {
  35.                     if (value>=2000) this.price = 40;
  36.                 }
  37.             },
  38.         },
  39.         methods : {
  41.         }
  42.     })
  43.    vm.amount=2000;
  44. </script>
  45. </body>
  46. </html>

效果

监听属性

代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>侦听器属性</title>
  6. </head>
  7. <body>
  8. <div class="app">
  9.     <p> 数量：    <input type="number" v-model="num" style="width:5em" min="0" :max="max"></p>
  10.     <p>单价：{{price}}</p>
  11.     <!--    <p>金额： {{num * price}}</p>-->
  12.     <p>金额：{{res}}</p>
  14. </div>
  15. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  16. <script>
  17.     const vm =  new Vue({
  18.         el : '.app',
  19.         data() {
  20.             return {
  21.                 num : 0,
  22.                 price : 50,
  23.                 res : 0,
  24.                 // 设置库存最大值
  25.                 max : 100
  26.                 // 这里只能赋初值
  27.             }
  28.         },
  29.         watch : {
  30.             // 是用来监听某一个属性值的变化，属性名要和data字段中的变量名相同
  31.             // 例如，我要监听"num"变量的变化
  32.             //num(新的值，原来的值)
  33.             num(newVal, oldVal) {
  34.                 console.log(newVal,oldVal);
  35.                 // this.res = this.num * this.price;
  36.                 // this.num -->newVal,this.price
  37.                 this.res = newVal * this.price;
  38.                 if (newVal >= 20)  {
  39.                     this.max = newVal;
  40.                     alert('库存不足，请进货');
  41.                 }
  42.             }
  43.         }
  45.     })
  46. </script>
  47. </body>
  48. </html>

效果

上一条：怎么找回误删除的文件？下一条：网站收录和排名关系，是不是收录越多，排名越好！
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议