zoukankan      html  css  js  c++  java
  • Vue 基本语法

    数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值:

    当msg属性改变,页面内容相应改变,但是是单向的

    <span>Message: {{ msg }}</span>

    由于html中内不能使用“Mustache”语法 (双大括号)这个格式进行赋值,所以通过v-bind:  进行赋值

    <div v-bind:id="dynamicId"></div>

    它们只要存在就意味着值为 true,如果 isButtonDisabled 的值是 nullundefined 或 false,则 disabled 特性甚至不会被包含在渲染出来的 <button> 元素中。

    <button v-bind:disabled="isButtonDisabled">Button</button>

    对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。在大括号中是单个表达式,不能是语句

    {{ number + 1 }}
    
    {{ ok ? 'YES' : 'NO' }}
    
    {{ message.split('').reverse().join('') }}
    
    <div v-bind:id="'list-' + id"></div>
    
    
    <!-- 这是语句,不是表达式 -->
    {{ var a = 1 }}
    
    <!-- 流控制也不会生效,请使用三元表达式 -->
    {{ if (ok) { return message } }}

    v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。

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

    v-bind   对元素的与数据进行绑定

    v-bind  简写

    <!-- 完整语法 -->
    <a v-bind:href="url">...</a>
    
    <!-- 缩写 -->
    <a :href="url">...</a>

    v-on   简写

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

    v-for    循环

    <li v-for="item in tem" >{{item.age}}--{{item.sex}}</li>

    v- for if  

    <li v-for="item in stu" v-if="item.sex=='girl'">{{item.age}}--{{item.sex}}</li>
  • 相关阅读:
    codeforces 1060 B
    codeforces 1060 A
    牛客 国庆七天乐 day1 L
    BZOJ 1087: [SCOI2005]互不侵犯King
    codeforces 792CDivide by Three(两种方法:模拟、动态规划
    codeforces 797C Minimal string
    codeforces 110E Lucky Tree
    codeforces 798D
    2017福建省赛 FZU2272~2283
    Android -- Looper、Handler、MessageQueue等类之间关系的序列图
  • 原文地址:https://www.cnblogs.com/dyd520/p/11393508.html
Copyright © 2011-2022 走看看