Vue基础：数据绑定

奋飛

发布于 2021-08-30 10:59:32

3310

发布于 2021-08-30 10:59:32

文章被收录于专栏：Super 前端

模板语法

v-once 指令

大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用指令

使用javascript表达式，只能包含单个表达式

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">div>

注意：只能访问全局变量，如Math、Date等；不应该在模板表达式中试图访问用户定义的全局变量。

Class 与 Style 绑定

绑定HTML Class

对象语法

<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">div>
<script>
data: {
isActive: true,
hasError: false
}
script>


<div v-bind:class="classObject">div>
<script>
data: {
classObject: {
  active: true,
  'text-danger': false
}
}
script>


<div v-bind:class="classObject">div>
<script>
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
  return {
    active: this.isActive && !this.error,
    'text-danger': this.error && this.error.type === 'fatal'
  }
}
}
script>

数组语法

<div v-bind:class="[activeClass, errorClass]">div>


<div v-bind:class="[isActive ? activeClass : '', errorClass]">div>


<div v-bind:class="[{ active: isActive }, errorClass]">div>

绑定内联样式

对象语法

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">div>


<div v-bind:style="styleObject">div>

数组语法

<div v-bind:style="[baseStyles, overridingStyles]">div>

多重值

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">div>

这会渲染数组中最后一个被浏览器支持的值。在这个例子中，如果浏览器支持不带浏览器前缀的 flexbox，那么渲染结果会是 display: flex。

注意：当v-bind:style使用需要特定前缀的CSS属性时，如transform，Vue.js会自动侦测并添加相应的前缀。

表单输入绑定

上述已经提到实现所谓的双向，不过是的语法糖。v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。因为它会选择 Vue 实例数据来作为具体的值。

`复选框`

多个勾选框，绑定到同一个数组：

<div id='example'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jacklabel>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">Johnlabel>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mikelabel>
  <p>Checked names: {{ checkedNames }}p>
div>
<script>
new Vue({
  el: '#example',
  data: {
    checkedNames: []
  }
})
script>

`单选按钮`

<div id="example">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">Onelabel>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Twolabel>
  <p>Picked: {{ picked }}p>
div>
<script>
new Vue({
  el: '#example',
  data: {
    picked: ''
  }
})
script>

`选择列表`

<div id="example-5">
  <select v-model="selected">
    <option disabled value="">请选择option>
    <option>Aoption>
    <option>Boption>
    <option>Coption>
  select>
  <span>Selected: {{ selected }}span>
div>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017/09/14 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html