Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Vue:实例演示,v-if,v-for,v-model,v-bind,v-on,计算属性和侦听器属性
Blogger Information
Blog 70
fans 4
comment 5
visits 104895
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Vue:实例演示,v-if,v-for,v-model,v-bind,v-on,计算属性和侦听器属性
JiaJieChen
Original
933 people have browsed it

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

一.实例演示,v-if,v-for,v-model,v-bind,v-on

方法 含义
v-bind 自定义普通属性，快捷语法是一个”:”号
v-on 事件属性，快捷语法是一个”@”符
v-model 双向绑定
v-for v-for : (循环变量, 索引/键) in/of 数组/对象 :key
v-if 条件渲染流程判断，有单分支和多分支

①v-bind，自定义普通属性，快捷语法是一个”:”号

代码块

  1.    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">  <body>
  2.     <div class="box">
  3.       <!-- v-bind指令，自定义普通属性，-->
  4.       <p v-bind:style="style1">{{text}}</p>
  5.       <hr />
  6.       <!-- 快捷语法‘：’  -->
  7.       <p :style="style2">{{text}}</p>
  8.     </div>
  9.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  11.     <script>
  12.       new Vue({
  13.         el: ".box",
  14.         data: {
  15.           text: "v-bind指令",
  16.           style1: "color:red",
  17.           style2: "background:blue",
  18.         },
  19.       });
  20.     </script>
  21.   </body

②v-on，事件属性，快捷语法是一个”@”符

代码块

  1.    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  3.     <script>
  4.       new Vue({
  5.         el: ".box",
  6.         data: {
  7.           text: "v-on指令",
  8.         },
  9.         //事件方法
  10.         methods: {
  11.           click1() {
  12.             alert(this.text);
  13.             d;
  14.           },
  15.         },
  16.       });
  17.     </script>

③v-model，双向绑定

代码块

  1.   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  2.     <script>
  3.       new Vue({
  4.         el: ".box",
  5.         data: { data1: "祖国未来可期" },
  6.       });
  7.     </script>

④v-for,列表渲染

代码块

  1.   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  2.     <script>
  3.       new Vue({
  4.         el: ".box",
  5.         data: {
  6.           //渲染数组
  7.           item: ["苹果", "香蕉", "西瓜", "葡萄"],
  8.           //渲染对象
  9.           hobby: { hobby1: "羽毛球", hobby2: "篮球" },
  10.           //渲染对象数组
  11.           user: [
  12.             { id: 1, name: "小张", get: "20" },
  13.             { id: 2, name: "小红", get: "20" },
  14.             { id: 3, name: "小朱", get: "20" },
  15.           ],
  16.         },
  17.       });
  18.     </script>

⑤v-if,条件渲染

  • 单分支
    • 多分支

      代码块

      1. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      2. <script>
      3. new Vue({
      4.   el: ".box",
      5.   data() {
      6.     return {
      7.       text: "点击显示或者隐藏",
      8.       flase: "true",
      9.       tips: "显示",
      10.       name: ["大众会员", "黄金会员", "铂金会员", "钻石会员", "非会员"],
      11.       point: 500,
      12.       text: "点击加积分",
      13.     };
      14.   },
      15. });
      16. </script>

二.计算属性和侦听器属性

方法 含义
键盘修饰符 todolist
计算属性 conputed
侦听器属性 watch

①键盘修饰符:todolist

代码块

  1.  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  2.     <script>
  3.       new Vue({
  4.         el: ".box",
  5.         data() {
  6.           return {
  7.             list: [],
  8.           };
  9.         },
  10.         methods: {
  11.           submit(ev) {
  12.               //原生判断键盘添加文字
  13.             // if (ev.key === "Enter") {
  14.             //   this.list.unshift(ev.target.value);
  15.             //   ev.target.value = null;
  16.             // }
  17.             //vue 键盘修饰符添加文字
  18.             this.list.unshift(ev.target.value);
  19.               ev.target.value = null;
  20.               console.log(ev.key);
  21.           },
  22.         },
  23.       });
  24.     </script>

②计算属性computed

代码块

  1.  <script>
  2.       new Vue({
  3.         el: ".box",
  4.         data() {
  5.           return {
  6.             //双向绑定sum
  7.             sum: "0",
  8.             //单价是50
  9.             money: 50,
  10.           };
  11.         },
  12.         //计算属性computed
  13.         computed: {
  14.           amount: {
  15.             //访问器属性get
  16.             get() {
  17.               //指当前sum变量*money变量
  18.               return this.sum * this.money;
  19.             },
  20.           },
  21.         },
  22.       });
  23.     </script>

③侦听器属性watch

代码块

  1. <script>
  2.       new Vue({
  3.         el: ".box",
  4.         data() {
  5.           return {
  6.             //双向绑定sum
  7.             sum: "0",
  8.             //单价是50
  9.             money: 50,
  10.             res: 0,
  11.             max: 100,
  12.           };
  13.         },
  14.         //侦听器属性
  15.         watch: {
  16.           // 是用来监听某一个属性的值的变化,属性名要和data字段中的变量名相同
  17.           // 例如,我要监听"num"变量的变化
  18.           // sum(新的值,原来的值)
  19.           sum(newVal, oldVal) {
  20.             this.res = newVal * this.money;
  22.             //监听库存量
  23.             if (newVal > 20) {
  24.               this.max = newVal;
  25.               alert("库存不足");
  26.             }
  27.           },
  28.         },
  29.       });
  30.     </script>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post