码迷,mamicode.com
首页 > 其他好文 > 详细

Vue 基本语法

时间:2019-08-22 12:46:21      阅读:89      评论:0      收藏:0      [点我收藏+]

标签:--   url   must   形式   list   流控制   包含   dos   cli   

数据绑定最常见的形式就是使用“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>

 

Vue 基本语法

标签:--   url   must   形式   list   流控制   包含   dos   cli   

原文地址:https://www.cnblogs.com/dyd520/p/11393508.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!