class,指令，表单控件

最新推荐文章于 2021-06-05 01:37:38 发布

转载最新推荐文章于 2021-06-05 01:37:38 发布 · 596 阅读

vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了Vue.js中的渲染指令与数据绑定方法，包括条件渲染、列表渲染及表单输入绑定等核心功能。通过具体示例展示了如何使用v-if、v-for和v-model等指令实现动态页面效果。

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 事件：它延迟“写入”底层数据。