zoukankan      html  css  js  c++  java
  • vue模板语法与绑定指令

    1.插入文本

     <!-- 插入文本 -->
    <span>Message: {{ msg }}</span>
     <!-- 插入HTML元素 -->
    <p>Using mustaches: {{ rawHtml }}</p>
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>

    2.v-bind绑定元素属性

    <div v-bind:id="dynamicId"></div>
    <!-- 缩写 -->
    <div :id="dynamicId"></div>
    <button v-bind:disabled="isButtonDisabled">Button</button> 
      <!-- 只有当isButtonDisabled的值为true时,disabled属性才能被渲染出来 -->

    3.支持JavaScript表达式

    {{ number + 1 }}
    {{ ok ? 'YES' : 'NO' }}
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id"></div>
    <!-- 只能解析单个表达式 -->
    
    <!-- 这是语句,不是表达式,不会解析 -->
    {{ var a = 1 }}
    {{ if (ok) { return message } }}

    4.v-if 控制元素的显示与隐藏

    <p v-if="seen">现在你看到我了</p>

    5.指令的参数

    一些指令能够接收一些参数,在指令名称之后以冒号表示

    动态参数为用方括号括起来的表达式(动态参数表达式里,空格和引号是无效的)

    <!-- href为参数,将url与href绑定 -->
    <a v-bind:href="url">...</a>
    <!-- 参数为click,表示监听的事件名 -->
    <a v-on:click="doSomething">...</a>
    <!-- 缩写 -->
    <a @click="doSomething">...</a>
    <!-- 动态参数 -->
    <a v-bind:[attributeName]="url"> ... </a>

    6.指令修饰符,指出指令应该以特殊方式绑定

    <!-- .prevent表示触发事件event.preventDefault() -->
    <form v-on:submit.prevent="onSubmit">...</form>
    <div v-bind:id="dynamicId"></div>
  • 相关阅读:
    LNMP状态管理命令
    Gogs基本使用介绍
    初探Asp.net请求机制原理 1
    关于css定位
    JS不同浏览器图片载入处理
    js之队列01
    javascript 快速排序
    JavaScript prototype背后的工作原理
    关于javascrpt if快速判断说明
    js动态加载图片核心代码
  • 原文地址:https://www.cnblogs.com/zsj-02-14/p/10482392.html
Copyright © 2011-2022 走看看