前言

插值表达式{{…}}
v-bind
v-model

一、插值表达式

插值表达式支持匿名变量、三目运算符、四则运算符、比较运算符、数值类型的一些内置方法，还有数组的索引取值方法和对象属性。

	<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript" src="../js/vue.js"></script>
</head><body><div id="app"><p>{{str.toUpperCase()}}</p><p>{{str+'1'}}</p><p>num1={{num1}},num2={{num2}}</p><p>{{num1>num2}}</p><p>{{1+1}}</p><p>{{flag}}</p><p>{{arr[1]}}</p><p>{{stu.name}}</p><p>{{3>2?true:false}}</p></div><script>new Vue({el: '#app',data: {str: "java",num1: 1,num2: 2,flag: true,arr: [1, 2, 3],stu: {name: "王五",age: 20}}})</script></body></html>

在这里插入图片描述

二、v-bind指令

（1）v-bind是Vue提供的，用于绑定HTML属性的指令，可以被绑定的HTML属性包括id、class、src、title、style等。这些可以是被绑定的属性以“名称/值”的形式出现，如<标签 v-bind:属性=“值”></标签>或者：<标签 :属性=“值”></标签>
（2）v-bind是单向绑定：假如你绑定的是表单的value属性，你在表单内上输入文本就不会与你绑定的值所同步，即数据只能从data流向页面。（如果不太理解，请继续往下看，与v-model指令相对比就知道了）

	<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript" src="../js/vue.js"></script>
</head><body><div id="app"><a v-bind:href="url">点击进入百度</a><!-- <a :href="url">点击进入百度</a> --></div><script>new Vue({el: '#app',data: {url: "https://www.baidu.com"}})</script></body></html>

在这里插入图片描述
（3）v-bind可以通过数组绑定多个，也可以三目运算绑定

	<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<style>.back {background-color: red;}.size {font-size: 28px;}
</style><body><div id="app"><p :class="[back,size]">你好</p><p :class="3>2?back:size">你好</p></div><script>new Vue({el: '#app',data: {back: "back",size: "size"}})</script></body></html>

在这里插入图片描述

三、v-model指令

（1）v-model实现表单类元素双向绑定（只有带有value属性的标签）,其默认收集value值。（如input，select，textarea等）
（2）语法<input v-model="test>"本质上是<input :value="test" @input="test=$event.target.value">
v-model本质上就是一个语法糖，“:value=“test””是将监听事件中的数据放入input，语法糖中用@input对输入框进行监听。而且强调一下不仅是获取input的值，而且v-model是实时获取数据。

	<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript" src="../js/vue.js"></script>
</head><body><div id="app"><input type="text" v-model="message"><p>{{message}}</p></div><script>new Vue({el: '#app',data: {message: "哈哈哈"}})</script></body></html>

在这里插入图片描述
大家看一下我在文本框直接输入时message的变化：

可以看出是实时变化
（3）对下拉框、多行文本框、多选按钮、单选按钮等不在举例，用法更上面一样，大家只需要记住v-model是对vlaue值的监控就会用了。
需要注意的是，大家对下拉框的绑定，直接在select标签内使用就行，然后实时获取每个option标签内的value值。对于复选框绑定，大家可以绑定数组，这样每次选中的就会自动添加到数组中存储。