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

最新推荐文章于 2023-10-28 17:12:59 发布

ZzzWClock

最新推荐文章于 2023-10-28 17:12:59 发布

阅读量274

点赞数

分类专栏： Web前端 Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43356354/article/details/118072897

版权

Web前端同时被 2 个专栏收录

35 篇文章 1 订阅

订阅专栏

Vue

1 篇文章 0 订阅

订阅专栏

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，自定义普通属性，快捷语法是一个":"号

代码块

   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">  <body>
    <div class="box">
      <!-- v-bind指令，自定义普通属性，-->
      <p v-bind:style="style1">{{text}}</p>
      <hr />
      <!-- 快捷语法‘：’  -->
      <p :style="style2">{{text}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
      new Vue({
        el: ".box",
        data: {
          text: "v-bind指令",
          style1: "color:red",
          style2: "background:blue",
        },
      });
    </script>
  </body

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

代码块

   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
      new Vue({
        el: ".box",
        data: {
          text: "v-on指令",
        },
        //事件方法
        methods: {
          click1() {
            alert(this.text);
            d;
          },
        },
      });
    </script>

③v-model，双向绑定

代码块

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

④v-for,列表渲染

代码块

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

⑤v-if,条件渲染

单分支
多分支

代码块

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      new Vue({
        el: ".box",
        data() {
          return {
            text: "点击显示或者隐藏",
            flase: "true",
            tips: "显示",
            name: ["大众会员", "黄金会员", "铂金会员", "钻石会员", "非会员"],
            point: 500,
            text: "点击加积分",
          };
        },
      });
    </script>

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

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

①键盘修饰符:todolist

代码块

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      new Vue({
        el: ".box",
        data() {
          return {
            list: [],
          };
        },
        methods: {
          submit(ev) {
              //原生判断键盘添加文字
            // if (ev.key === "Enter") {
            //   this.list.unshift(ev.target.value);
            //   ev.target.value = null;
            // }
            //vue 键盘修饰符添加文字
            this.list.unshift(ev.target.value);
              ev.target.value = null;
              console.log(ev.key);
          },
        },
      });
    </script>

②计算属性computed

代码块

 <script>
      new Vue({
        el: ".box",
        data() {
          return {
            //双向绑定sum
            sum: "0",
            //单价是50
            money: 50,
          };
        },
        //计算属性computed
        computed: {
          amount: {
            //访问器属性get
            get() {
              //指当前sum变量*money变量
              return this.sum * this.money;
            },
          },
        },
      });
    </script>

③侦听器属性watch

代码块

<script>
      new Vue({
        el: ".box",
        data() {
          return {
            //双向绑定sum
            sum: "0",
            //单价是50
            money: 50,
            res: 0,
            max: 100,
          };
        },
        //侦听器属性
        watch: {
          // 是用来监听某一个属性的值的变化,属性名要和data字段中的变量名相同
          // 例如,我要监听"num"变量的变化
          // sum(新的值,原来的值)
          sum(newVal, oldVal) {
            this.res = newVal * this.money;

            //监听库存量
            if (newVal > 20) {
              this.max = newVal;
              alert("库存不足");
            }
          },
        },
      });
    </script>

ZzzWClock

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue:实例演示,v-if,v-for,v-model,v-bind,v-on,计算属性和侦听器属性

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-forv-for : (循环变量, 索引/键) in/of 数组/对象 :keyv-if条件渲染流程判断，有单分支和多分支①v-bind，自定义普
复制链接

扫一扫