Vue.js模板方法

v-html

将 html 的代码输出

<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>Hello World</h1><img src="https://www.baidu.com/img/bd_logo1.png" />'
  }
})
</script>

v-bind

使用 v-bind 指令赋值给 HTML 属性

<div id="app">
    <img v-bind:src="imgurl" />
    <h1 v-bind:class="{'img_class': useClass}">Hello</h1>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    imgurl: 'https://www.baidu.com/img/bd_logo1.png',
    useClass: true
  }
})
</script>

<style>
.img_class {
  background: #444;
}
</style>

v-if

用于判断条件

<img id="app" src="https://www.baidu.com/img/bd_logo1.png" v-if="visible"/>

<script>
new Vue({
    el: '#app',
    data: {
        visible: true
    }
})
</script>

v-else-if/v-else

用于判断条件

<div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
new Vue({
  el: '#app',
  type: 'C'
})
</script>

v-show

可以使用 v-show 指令来根据条件展示元素,

用法上和 v-if 差不多,但是 v-if 是动态的向 DOM 树内添加或者删除 DOM 元素。 而 v-show 是通过设置 DOM 元素的 display 样式属性控制显隐。

关于 v-show 和 v-if 的区别,详见 v-if 和 v-show的区别

<div id="app">
    <h1 v-show="ok">Hello!</h1>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    ok: true
  }
})
</script>

v-model

v-model 指令来实现双向数据绑定。

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello World'
  }
})
</script>

v-on

使用 v-on 监听事件

<div id="app">
    <button v-on:click="onclick">{{message}}</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Click Me'
  },
  methods: {
    onclick: function(){
        alert("Hello")
    }
  }
})
</script>

v-for

循环遍历

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Apple' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

或者

<div id="app">
  <ul>
    <li v-for="(key,value, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: 'Hello',
      url: 'World',
      slogan: 'Vue.js'
    }
  }
})
</script>

缩写

  • v-bind 缩写 <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a>
  • v-on 缩写 <!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 利用AOP对点击事件作防抖处理

    可能第一个想到的方法是在 OnClickListener.onClick 中根据时间间隔来判断,这也是比较传统的方案。但是缺点同样也很明显,就是对现有代码的侵入...

    俞其荣
  • Glide源码解析(一)

    Glide是一个快速高效的Android图片加载库,注重于平滑的滚动。Glide提供了易用的API,高性能、可扩展的图片解码管道(decode pipeline...

    俞其荣
  • Tinker源码分析(五):加载so补丁流程

    从 assets/so_meta.txt 中读取 so 补丁信息,每一条 so 补丁信息都会被封装成一个 ShareBsDiffPatchInfo 对象,然后放...

    俞其荣
  • 前端基础-Vue.js模板语法(指令)

    指令 (Directives) 是带有 v- 前缀的特殊 特性 相当于自定义html属性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是...

    cwl_java
  • Vue常用系统指令

    标签将会被替代为对应数据对象上 msg 属性(msg定义在data对象中)的值。无论何时,绑定的数据对象上 msg 属性发生了改变,插值处的内容都会更新。 插...

    羊羽shine
  • 【云+社区年度征文】Vue深入dom到组件动画

    MV,VM是Vue提供,关注model操作(es5:obj.properties(对象性能、内容)+虚拟dom)

    瑞新
  • (5)打鸡儿教你Vue.js

    达达前端
  • VUE-指令

    指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是:单个 JavaScript 表达式。指令的职责是,当表达式的值改变时,将其产生...

    cwl_java
  • Vue.js 快速上手精华梳理-条件指令

    瑞新
  • Vue3 | Mixin、自定义指令、Teleport传送门、Render函数、插件 详解 及 案例分析

    如果组件本身有 自身定义的data字段 且与 引入的Mixin 模块的data字段有冲突, 则以组件本身的字段为准;

    凌川江雪

扫码关注云+社区

领取腾讯云代金券