vue基础指令

最新推荐文章于 2022-12-07 16:12:07 发布

. .306

最新推荐文章于 2022-12-07 16:12:07 发布

阅读量310

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_59347262/article/details/121682421

版权

vue基础指令

vue指令

v-text和v-html

代码实现

<div id="app">
      <div v-text="name"></div>
</div>
    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          name: "<span>姓名</span>"
        }
      });
    </script>
    //跟innerHtml和innerText相同

v-model

双向数据绑定： data中的数据—>渲染到页面
页面中输入框的内容变化---->data中的数据变化

事件

事件处理

代码实现

  <div id="app">
      <button v-on:click="getRes">按钮</button>
      <button @click="getRes">按钮</button>
      <button @click="getRes(event)">按钮</button>
      <h3>{{ num }}</h3>
    </div>

    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          num: 10
        },
        methods: {
          getRes: function() {
            this.num++;
            console.log(this == vue); //这里的this指的是vue的实例对象
            console.log(event);
          }
        }
      });
    </script>

事件修饰符

a标签默认有默认跳转行为，添加了prevent修饰符，点击就不会页面跳转了。

<a href="https://www.baiud.com" @click.stop="fn"></a>
<a href="https://www.baiud.com" @click.prevent="fn"></a>

属性绑定

语法： 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>

样式绑定

类名对象形式

  <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>

类名数组形式

 <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>

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>

分支和循环结构

条件

语法： 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>

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

循环

语法v-for="(item,index) in 循环的名字"

. .306

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础指令

vue基础指令vue指令v-text和v-html代码实现<div id="app"> <div v-text="name"></div></div> <script> var vue = new Vue({ el: "#app", data: { name: "<span>姓名</span>" } })
复制链接

扫一扫