【Vue教程二】数据绑定、样式绑定

qing_小诺

已于 2022-07-03 21:15:11 修改

阅读量901

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2019-05-13 16:04:13 首次发布

本文链接：https://blog.csdn.net/qq_33237207/article/details/90171879

版权

Vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

我们用下载vue.js文件并用script标签引入的方式来介绍基本语法，实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="common/vue.js"></script>
</head>

<body>
    <div id="app">{{message}}</div>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
</body>

</html>

Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：

var data = { a: 1 }
var vm = new Vue({
    el: '#app',
    data: data
})
console.log(vm.$data === data)  // => true
console.log(vm.$el === document.getElementById('app')) // => true

一、模板语法

1、插值

1.1、文本插值（数据绑定）：

最常见的形式就是使用 {{...}}（双大括号）

或者用 v-text 来显示数据，里面的值会替换标签中的文本。

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。

<div id="app">
        <p>{{ message }}</p>
        <!-- 等同于下面： -->
        <p v-text="message"></p>
        <p v-once>这个将不会改变: {{ message }}</p>
</div>
<script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        })
</script>

此时，在控制台输入vm.message='qing'即可修改第一个和第二个p元素的值，不会修改第三个p元素。

1.2、html插值：应该使用 v-html 指令：

要想输出html代码，就要用到v-html指令。

<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>hello 我是h1标签</h1>'
  }
})
</script>

1.3、属性绑定：应该使用 v-bind 指令：

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

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

1.4表达式：

<div id="app">
        {{message}}<br>
        {{5+5}}<br>
        {{ ok ? 'YES' : 'NO' }}<br>
        {{ message.split('').reverse().join('') }}
        <div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
<script>
        new Vue({
            el: '#app',
            data: {
                ok:true,
                id: 0,
                message: 'Hello Vue!'
            }
        })   
</script>

界面显示如下：

2、指令

指令是带有 v- 前缀的特殊特性。

2.1、参数：在指令名称之后以冒号表示。举例：

<a v-bind:href="url">...</a>
<a v-on:click="doSomething">...</a>

上面href、click就是参数。

2.2、修饰符：是以半角句号 . 指明的特殊后缀。举例：

.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit">...</form>

3、缩写

【v-bind:】缩写成【:】；【v-on:】缩写成【@】

<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

二、样式绑定 '`v-bind:class`' `简写成` '`:class`'

1、class样式—普通方法：（与原始添加class属性相同）

<style>
        .red{
            color: red;
        }
</style>
...
    <div id="app">
        <div class="red">
            我是有样式的div
        </div>
    </div>

如果需要根据条件判断是否添加某个class，则需要用到下面的几种方法：

2、class样式—对象语法：适用于要绑定的样式个数和名字确定，但动态决定用不用

2.1、传一个样式对象，绑定的数据对象不必内联定义在模板里：【推荐】

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

2.2、给 v-bind:class 传一个对象：

对象中的键是样式名称，值是boolean值，决定样式是否存在的。

<style>
        .class1 {
            background: #444;
            color: #eee;
        }
</style>
...
    <div id="app">
        <div v-bind:class="{class1: isActive}">
            我是有样式的div
        </div>
    </div>
   ...
    data: {
        isActive: true
    }

2.3、可以传入多个class，且与普通class属性共存：

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

注：带有减号的样式名称（例如上面例子中的'text-danger'）要用引号引起来，不然报错，active也可以用引号引起来。

如果此时isActive=true，hasError=false，结果渲染为：

<div class="static active"></div>

3、class样式—数组语法：适用于要绑定的样式个数不确定、名字也不确定

3.1、给 v-bind:class 传一个数组：(一般不推荐这么写，比较麻烦)

<div v-bind:class="[activeClass, errorClass]"></div>
...
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

上面也可写成：【推荐】

<div v-bind:class="classArr"></div>
...
data: {
  classArr: ['active','text-danger'],
}

或者也可以写成：

<div v-bind:class="['active', 'text-danger']"></div>

渲染为：

<div class="active text-danger"></div>

3.2、使用三元表达式：

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

4、内联样式（不常用）—对象语法：`v-bind:style`

4.1、CSS 属性名可以用驼峰式或短横线分隔 (记得用引号括起来) 来命名

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">hello</div>
<!-- 或者下面的写法 -->
<div v-bind:style="{ 'color': activeColor, 'font-size': fontSize + 'px' }">hello</div>
...
data: {
  activeColor: 'red',
  fontSize: 30
}

4.2、传一个样式对象【推荐】

<div v-bind:style="styleObject"></div>
...
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

5、内联样式—数组语法

使用数组将多个样式对象应用到一个元素上

<div v-bind:style="[baseStyles, overridingStyles]"></div>
...
data: {
    baseStyles: {
      color: 'green',
      fontSize: '30px'
    },
	overridingStyles: {
      'font-weight': 'bold'
    }
  }

qing_小诺

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Vue教程二】数据绑定、样式绑定

我们用下载vue.js文件并用script标签引入的方式来介绍基本语法，实例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-.........
复制链接

扫一扫