class,指令,表单控件

1.class style“`

Style 数组语法

window.οnlοad=function(){
//在这里面写Vue.js代码
var vm = new Vue({
el: ‘div’,
data: {
styleObjectA: {
color: ‘red’,
background:’blue’
},
styleObjectB: {
fontSize: ‘30px’
}
}
})
//—————-
}

2.渲染指令
v-if
  在字符串模板中,如Handlebars,我们得像这样写一个条件块:

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
template v-if
  因为 v-if 是一个指令,需要将它添加到一个元素上。但是如果我们想切换多个元素呢?此时我们可以把一个 <template> 元素当做包装元素,并在上面使用 v-if,最终的渲染结果不会包含它。
<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>
<h1 v-show="ok">Hello!</h1>


v-for
  可以使用 v-for 指令基于一个数组渲染一个列表。这个指令使用特殊的语法,形式为 item in items,items 是数据数组,item 是当前数组元素的别名:

<ul id="example">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
js代码:

var example1 = new Vue({
  el: '#example',
  data: {
    items: [
      { message: 'one' },
      { message: 'two' }
    ]
  }
})
  在 v-for 块内我们能完全访问父组件作用域内的属性,另有一个特殊变量 $index,正如你猜到的,它是当前数组元素的索引:

  <ul id="example">
  <li v-for="item in items">
    {{ parentMessage }} - {{ $index }} - {{ item.message }}
  </li>
</ul>
js代码:

var example2 = new Vue({
  el: '#example',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'one' },
      { message: 'two' }
    ]
  }
})

template v-for
  类似于 template v-if,也可以将 v-for 用在 template 标签上,以渲染一个包含多个元素的块。例如:

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>


Text
  可以在表单的input 元素上使用v-model 指令来创建双向数据绑定。它会根据input元素的类型自动选取正确的绑定模式。

<span>Message is:{{msg}}</span>
<input type="text" v-model="msg" placeholder="edit me">
js代码:

var vm = new Vue({
  el: 'div',
  data: {
      msg:"hello world"
  }
})
其中placeholder为默认显示提示。



Checkbox
多个勾选逻辑值,如下代码:

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
当我们要绑定值时可以用v-bind来绑定,如下代码:

<div>
<input
  type="checkbox"
  v-model="toggle"
  v-bind:true-value="a"
  v-bind:false-value="b">
</div>
当checkbox为true时,值为a;当为fals时,值为b。

Radio
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
我们可以用v-bind指令来绑定数据。如下代码:

<input type="radio" v-model="pick" v-bind:value="a">

select

<html>
<head>
<script src="lib/vue.js"></script>
</head>
<body>
<div>
<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>
</div>
</body>
</html>

window.onload=function(){
 //在这里面写Vue.js代码
 new Vue({
  el: 'div',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})
 //----------------
}

参数特性
lazy

  在默认情况下,v-model 在input 事件中同步输入框值与数据,可以添加一个特性 lazy,从而改到在 change 事件中同步:

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model="msg" lazy>
如下实例,当在文本框中输入完成以后,才更新内容:

<span>Message is:{{msg}}</span>
<input type="text" v-model="msg" lazy>
number

  如果想自动将用户的输入保持为数字,可以添加一个特性 number:

<input v-model="age" number>
debounce

  debounce 设置一个最小的延时,在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作(例如在输入提示中 Ajax 请求),它较为有用。

<input v-model="msg" debounce="500">
  注意 debounce 参数不会延迟 input 事件:它延迟“写入”底层数据。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值