vue基础指令2

最新推荐文章于 2023-03-18 18:19:20 发布

幻墨如烟u

最新推荐文章于 2023-03-18 18:19:20 发布

阅读量339

点赞数

分类专栏：笔记文章标签： vue.js

本文链接：https://blog.csdn.net/sjs1766349405/article/details/121654783

版权

笔记专栏收录该内容

45 篇文章 1 订阅

订阅专栏

五、属性绑定

语法： v-bind:属性名=值或者:属性名=值

 <div id="app">
      <a :href="url">跳转</a>
      <button @click="fn">更改跳转地址</button>
    </div>

    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          url: ""
        },
        methods: {
          fn: function() {
            this.url = "https://www.baidu.com";
          }
        }
      });
    </script>

六、样式绑定

1.类名对象形式

  <style>
      .red {
        width: 200px;
        height: 200px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div v-bind:class="{red:isShow}">我是测试div</div>
      <button @click="fn">更改跳转地址</button>
    </div>

    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          isShow: false
        },
        methods: {
          fn: function() {
            this.isShow = !this.isShow;
          }
        }
      });
    </script>

2.类名数组形式

    <style>
      .redName {
        width: 200px;
        height: 200px;
        background-color: red;
      }
      .fzName {
        font-size: 40px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div :class="[red,fz]">我是测试div</div>
      <button @click="fn">更改跳转地址</button>
    </div>

    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          red: "redName",
          fz: "fzName"
        },
        methods: {
          fn: function() {
            this.red = "";
          }
        }
      });
    </script>

3.style类绑定

    <div id="app">
      <div :style="{width:w,height:h,border:bd}">111</div>
    </div>

    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          w: "200px",
          h: "200px",
          bd: "1px solid #000"
        },
        methods: {
          fn: function() {
            this.w = "300px";
          }
        }
      });
    </script>

七、分支和循环结构

1.条件

语法： v-if v-else-if ... v-else

    <div id="app">
      <p v-if="sal>=8000">吃大餐</p>
      <p v-else-if="sal>=5000&&sal<8000">在家吃</p>
      <p v-else="sal>=8000">没得吃</p>
    </div>

    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          sal: 5000
        },
        methods: {
          fn: function() {
            this.w = "300px";
          }
        }
      });
    </script>

7.2 v-if和v-show

 <div id="app">
      <button @click="fn">按钮</button>
      <div v-show="flag">我是div元素</div>
      <div v-if="flag">我是div元素</div>
    </div>

    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          flag: false
        },
        methods: {
          fn: function() {
            this.flag = !this.flag;
          }
        }
      });
    </script>

注意v-if和v-show的区别：

v-if是是否渲染显示出来，v-show是已经渲染了，切换了display:none属性。
如果页面频繁切换的时候，考虑到性能问题，推荐使用 v-show

2.循环

    <div id="app">
      <!-- 第一种写法 -->
      <ul>
        <li v-for="item in students">{{ item }}</li>
      </ul>
      <!-- 第二种写法 -->
      <ul>
        <li v-for="(item,index) in students">{{ item }}---{{ index }}</li>
      </ul>
    </div>

    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          students: ["tom", "jim", "jack"]
        }
      });
    </script>

3.tab选项卡案例

 <script src="vue.js"></script>
    <style>
      .active {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <button
        v-for="(item,index) in navList"
        :class="{active:index==num}"
        @click="tab(index)"
      >
        {{ item }}---{{ index }}
      </button>
      <div v-for="(conitem,index) in conList" v-show="index==num">
        {{ conitem }}---{{ index }}
      </div>
    </div>
    <script>
      let vue = new Vue({
        el: "#box",
        data: {
          navList: ["按钮1", "按钮2", "按钮3"],
          conList: ["内容1", "内容2", "内容3"],
          num: 0
        },
        methods: {
          tab: function(index) {
            this.num = index;
          }
        }
      });
    </script>

4.博客发布练习

    <div id="app">
      <textarea name="" id="" cols="30" rows="10" v-model="content"></textarea>
      <button @click="showContent">发布</button>
      <ul>
        <li v-for="(item,index) in infoList">
          <span>{{ item.content }}</span>
          <span>{{ item.time }}</span>
          <a @click.prevent="del">删除</a>
        </li>
      </ul>
    </div>
    <script>
      let vue = new Vue({
        el: "#app",
        data: {
          content: "",
          infoList: [
            { msg: "这是发布内容", time: "2021年11月27日" },
            { msg: "这是发布内容2", time: "2021年11月28日" }
          ]
        },
        methods: {
          showContent: function() {
            let year = new Date().getFullYear();
            let month = new Date().getMonth() + 1;
            let day = new Date().getDay();
            let obj = {
              msg: this.content,
              time: `${year}年${month}月${day}日`
            };
            this.infoList.push(obj);
            this.content = "";
          },
          del: function(event) {
            let ul = event.target.parentNode.parentNode;
            ul.removeChild(event.target.parentNode);
          }
        }
      });
    </script>