<强>一。计算属性(计算)
& lt; template>
& lt; div类="盒子"比;
& lt; h2>计算属性& lt;/h2>
& lt; hr>
& lt; !——直接渲染得到数据——比;
& lt; p> & lt;输入类型=拔谋尽眝模型=跋ⅰ弊４? lt;/p>
& lt; !——对数据的数据进行简单的操作
这样有一个不好的地方就是后期对页面数据的维护不是那么方便,比;
& lt; p> {{message.toUpperCase ()}} & lt;/p>
& lt; !——通过计算属性改变后进行渲染——比;
& lt; p> {{computedMessage}} & lt;/p>
& lt; hr>
& lt; !——通过事件来改变属性——比;
& lt; span>{{消息}}& lt;/span> & lt;按钮@click=癱hangeMessage()在点击改变& lt;/button>
& lt; hr>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
数据(){
返回{
信息:“Hello world !”
passw2:“sss”,
}
}，//计算属性是返回返回值,在使用的时候只使用函数名不是调用函数
计算:{
computedMessage () {
返回this.message.split (”)
}
}，
方法:{
changeMessage () {
这一点。消息=this.computedMessage +“奥特曼”
}
}，
}
& lt;/script>
这里需要注意的是计算中的函数名不能和所操作数据中的数据一样,计算中的函数名相当于是操作数据数据后的新数据,在模块中直接使用这个函数名即可实现对数据中数据改变的渲染。
<强>二。监听器(看)
首先确认手表是一个对象,一定要当成对象来用。
对象就有键,有值。
第一种键:就是你要监听的那个数据,比如说美元的路线,这个就是要监控路由的变化,或者中是数据的某个变量。
值可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是改变后的新值,第二个是改变之前的值。
第二种,值也可以是函数名:不过这个函数名要用单引号来包裹。(不常用)
第三种情况厉害了(监听的那个数据值是一个对象):
值是包括选项的对象:选项包括有三个。
<李>,,,第一个处理程序:其值是一个回调函数。即监听到变化时应该执行的函数。
<李>,,,第二个是深刻的:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。)
<李>,,,第三个是直接的:其值是true或false;确认是否以当前的初始值执行处理程序的函数。
用法一:基础用法
& lt; template>
& lt; div类="盒子"比;
& lt; h2>监听器& lt;/h2>
& lt; label>二次密码:& lt;/label>
& lt;输入v模型=" watchMsg "/比;
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
数据(){
返回{
信息:“Hello world !”
watchMsg:“我是监听操作的,
}
}，
看:{
watchMsg (newVal oldVal) {
console.log (' newVal: ' + newVal ' oldVal: ' + oldVal);
}，
}
}
& lt;/script>
用法二:处理方法和直接属性
& lt; template>
& lt; div类="盒子"比;
& lt; h2>监听器& lt;/h2>
& lt; label>二次密码:& lt;/label>
& lt;输入v模型=" watchMsg "/比;
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
数据(){
返回{
信息:“Hello world !”
watchMsg:“我是监听操作的,
}
}，
看:{
watchMsg: {
处理程序(newVal oldVal) {
console.log (' newVal: ' + newVal ' oldVal: ' + oldVal);
}，
直接:没错,
}
}
}
& lt;/script>
注意到处理程序了吗,我们给watchMsg绑定了一个处理方法,之前我们写的看方法其实默认写的就是这个处理器,Vue.js会去处理这个逻辑,最终编译出来其实就是这个处理器。
而直接:真正的代表如果在看里声明了watchMsg之后,就会立即先去执行里面的处理方法,如果为,假的就跟我们以前的效果一样,不会在绑定的时候就执行。
用法三:
<强>深属性
看里面还有一个属性,深,默认值是,假的,代表是否深度监听,比如我们的数据里有一个obj属性/数组:
& lt; template>
& lt; div类="盒子"比;
& lt; h2>监听器& lt;/h2>
& lt; label>二次密码:& lt;/label>
& lt;输入v模型=" obj。watchMsg”/比;
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
数据(){
返回{
信息:“Hello world !”
obj: {
watchMsg:“我是监听操作的,
}
}
}，
看:{//需要注意的是这里的监听对象也需要变化
obj。watchMsg ": {
处理程序(newVal oldVal) {
console.log (' newVal: ' + newVal ' oldVal: ' + oldVal);
}，
直接:没错,
深:没错,
}
}
}
& lt;/script>
