[前端] VUE基础 (3) (computed计算属性、watch侦听器、v-model双向绑定、v-model修饰符)

二、侦听器

侦听器是用来侦听某个属性是否被改变的。例如修改message：

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Watch</title>
</head>
<div id="app">
    <p>{{ message }}</p>
    <button @click="clickHandler">修改</button>
</div>
<script src="static/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                message: "leo"
        methods: {
            clickHandler() {
                this.message = 'Alex';
        watch: {
            'message': function (value) {
                //todo...
                alert("message被修改了");
</script>
</body>
</html>

当我们点击修改按钮的时候，message从"leo"被修改为"Alex"，此时该修改操作会被watch侦听器所发现，并在修改之前（执行clickHandler之前）执行我们所指定的匿名函数，在页面上弹出alert框。

三、v-model双向数据绑定

v-model实现双向数据绑定的意思是，我们可以在一些输入标签（text输入框、textarea、select、checkbox等）使用v-model，使其值与某个vue属性绑定。

当我们在输入框中输入字符时，vue对应的属性值也同步变化。这就是数据双向绑定。

1.手工实现简单的双向绑定

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>双向绑定</title>
</head>
<div id="app">
    <input type="text"  @input="changeHandler" :value="message">
    {{message}}
    <button @click="clickHandler">leo</button>
</div>
<script src="static/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                message: ""
        methods:{
            clickHandler(){
                this.message = "leo";
            changeHandler(e){
                this.message = e.target.value;
</script>
</body>
</html>

当我们修改text输入框的值时，触发oninput事件，changeHandler函数被执行，将输入框中的值赋值给message。

然后使用v-bind:value来绑定value和message的值，完成另一个方向的绑定。（这里使用v-bind，而不是真正的手工实现。真正的实现，应该要借助于侦听器，侦听message值的变化，并赋值给text标签的value）

2.v-model双向绑定简单例子

标签-->属性 的绑定方向：

简单例子：

< div id ="app" > < input type ="text" v-model ="message" > < p > {{message}} </ p > </ div > < script src ="static/vue.js" ></ script > < script > new Vue({ el: " #app " , data() { return { message: "" </ script > </ body >

我们给text输入框绑定了message属性，message的初始值是空字符串，实现效果：

3.v-model简单例子2

属性-->标签 的绑定方向：

当我们直接在某个事件函数中修改message属性的值，输入框中的值也会对应发生同步变化：

< div id ="app" > < input type ="text" v-model ="message" > < button @click ="changeValue" > 将message的值修改为"hello world" </ button > </ div > < script src ="static/vue.js" ></ script > < script > new Vue({ el: " #app " , data() { return { message: "" methods:{ changeValue(){ this .message = " hello world " ; </ script > </ body >

实现效果：

当我们点击"将message的值修改为'hello world'"按钮是，text中的值也改变了。

4.各种表单输入标签的双向绑定

主要是注意每种输入标签绑定的值的类型，例如bool、列表、字符串。

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>双向绑定</title>
</head>
<div id="app">
    <div> <!-- text输入框 -->
        <input type="text" v-model="message">
    </div>
    <div> <!-- textarea输入框 -->
        <textarea v-model="message" placeholder="add multiple lines"></textarea>
    </div>
    {{message}}
    <div> <!-- 单个复选框 -->
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>
    </div>
    <div id='example-3'>  <!-- 多个复选框 -->
        <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>
        <span>Checked names: {{ checkedNames }}</span>
    </div>
    <div id="example-4"> <!-- 单选按钮 -->
        <input type="radio" id="one" value="One" v-model="picked">
        <label for="one">One</label>
        <input type="radio" id="two" value="Two" v-model="picked">
        <label for="two">Two</label>
        <span>Picked: {{ picked }}</span>
    </div>
    <div id="example-5"> <!-- select 单选 -->
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected: {{ selected }}</span>
    </div>
    <div id="example-6"> <!-- select多选 -->
        <select v-model="multiselected" multiple style="width: 50px;">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected: {{ multiselected }}</span>
    </div>
</div>
<script src="static/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                message: "",  // text和textarea文本输入框
                checked: false,  // 单个复选框
                checkedNames: [],  //多个复选框
                picked: '',  // 单选按钮
                selected: '',  // select，单选时
                multiselected: []  // select，多选时
        methods: {}
</script>
</body>
</html>

实现效果：

5.v-for实现动态选项

< div id ="app" > < select v-model ="selected" > < option v-for ="option in options" v-bind:value ="option.value" > {{ option.text }} </ option > </ select > < span > Selected: {{ selected }} </ span > </ div > < script src ="static/vue.js" ></ script > < script > new Vue({ el: " #app " , data() { return { selected: ' A ' , options:[ { text: ' One ' , value: ' A ' }, { text: ' Two ' , value: ' B ' }, { text: ' Three ' , value: ' C ' } </ script > </ body >

select标签中的option是使用v-for遍历options列表属性动态生成的。

6.v-model与v-bind配合实现动态值绑定

< div id ="app" > < input id ='rad1' type ="radio" v-model ="pick" v-bind:value ="a" > < label for ="rad1" > Leo </ label > < input id ='rad2' type ="radio" v-model ="pick" v-bind:value ="b" > < label for ="rad2" > Alex </ label > pick:{{pick}} </ div > < script src ="static/vue.js" ></ script > < script > new Vue({ el: " #app " , data() { return { pick: '' , a: {name: ' leo ' }, b: {name: ' alex ' } </ script > </ body >

实现结果：

我们发现，v-model双向绑定的属性pick的值是来自value属性的，value属性由和a、b绑定，a、b可能是字符串、布尔值、或者对象等任意类型。

在5.中，也是这种用法，而且5.中使用的是循环获取动态值来产生动态选项。

四、v-model修饰符

1.lazy

lazy修饰符的作用是当我们进行了双向绑定后，在我们输入的使用，不对绑定的属性赋值，而是等我们输入完后使用回车，或光标切换到其他标签时，值才会赋予绑定的属性：

< div id ="app" > < input type ="text" v-model.lazy ="message" /> message:{{message}} < input type ="text" /> </ div > < script src ="static/vue.js" ></ script > < script > new Vue({ el: " #app " , data() { return { message: "" </ script > </ body >

实现效果：

2.number

number修饰符是让输入框中只有输入数字才有效（输入e3或e-3这种科学计数法可以）。

< div id ="app" > < input type ="text" v-model.number ="number" /> message:{{number}} < input type ="text" /> </ div > < script src ="static/vue.js" ></ script > < script > new Vue({ el: " #app " , data() { return { number: 0 </ script > </ body >

实现效果：

3.trim

trim修饰符是清除输入数据前面和后面的空格。

< div id ="app" > < input type ="text" v-model.trim ="trimedstring" /> trimedstring:{{trimedstring}} < input type ="text" /> </ div > < script src ="static/vue.js" ></ script > < script > new Vue({ el: " #app " , data() { return { trimedstring: '' </ script > </ body >

实现效果：

注意，字符串中间有空格的话，不管有多少个，都只保存一个空格。前面的空格会被直接去掉。

☜(ˆ▽ˆ)

保持学习，否则迟早要被淘汰*(^ 。 ^ )***