vue基础 - 02 （双向数据绑定、实时监听输入框、键盘事件监听、watch监听器、单选框、下拉选框、多选框、多选框单独使用、动态样式class/style）

最新推荐文章于 2024-01-28 22:45:26 发布

黑猫了个怪怪

最新推荐文章于 2024-01-28 22:45:26 发布

阅读量1k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Janicecat/article/details/121691155

版权

1、双向数据绑定

方向1 - 数据绑定到DOM元素上

方向2 - DOM变化更新绑定的数据

表单元素：输入框，单选框，多选框...，用户可以操作来修改其值 -- 把用户操作的值更新给数据

v-model：数据绑定值的同时，DOM变化也会修改变量，用来快速获取form表单元素的值

2、实时监听输入框

@input：输入框内容变化时触发

   <div id="app">
      <input type="text" v-model="word" @input="wordChanged" />
      <p>{{word}}</p>
    </div>

    <script src="./vendor/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: { word: "111" },
        methods:{
          wordChanged(){
            console.log(this.word);
          }
        }
      });
    </script>

3、键盘事件监听

@keyup：监听键盘，回车需要添加if判断keyCode==13

@keyup.13：监听回车

    <div id="app">
      <input type="text" v-model="word" @keyup="doEnter" />
      <hr />
      <input type="text" v-model="word" @keyup.13="doEnter1" />
      <p>{{word}}</p>
    </div>

    <script src="./vendor/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: { word: "111" },
        methods: {
          doEnter1() {
            console.log("回车触发：", this.word);
          },
          doEnter(e) {
            if (e.keyCode == 13) console.log("回车触发：", this.word);
          },
        },
      });
    </script>

4、watch监听器

监听data中属性的变化

watch：{要监听的属性名：变化时触发的事件}

      <div>
        <span>{{count}}</span>
        <button @click="changeCount(+1)">+1</button>
        <button @click="changeCount(-1)">-1</button>
        <br />
        <input type="text" v-model="count" />
      </div>

      <script src="./vendor/vue.js"></script>
      <script>
        //watch：监听器，监听data中属性的变化{要监听的属性名：变化时触发的事件}
        new Vue({
          el: "#app",
          data: { count: 5 },
          methods: {
            changeCount(d) {
              //字符串转数字：parseInt(字符串) Number(字符串)
              //取巧：*1
              this.count = this.count * 1 + d;
            },
          },
          watch: {
            count () {
              console.log("侦测到count发送变更：", this.count);
            },
          },
        });
      </script>

5、单选框双向数据绑定

 <body>
    <!-- 
    lable：此标签会接受点击事件，传递给内部的单选框
    name相同的单选框，会被识别为一组
   -->
    <div id="app">
      <span>性别：</span>
      <label><input type="radio" value="1" name="sex" v-model="sex" />男</label>
      <label><input type="radio" value="0" name="sex" v-model="sex" />女</label>
      <br />
      <h3>您选择的性别是：{{sex}}</h3>
    </div>

    <script src="./vendor/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: { sex: 0 },
      });
    </script>
  </body>

6、下拉选框双向数据绑定

 <body>
    <div id="app">
      <span>请选择城市：</span>
      <select v-model="target">
        <option value="./img/1.jpg">重庆</option>
        <option value="./img/2.jpg">北京</option>
        <option value="./img/3.jpg">上海</option>
      </select>
      <div>选择的图片：{{target}}</div>
      <img :src="target" alt="" />
    </div>

    <script src="./vendor/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: { target: "./img/1.jpg" },
      });
    </script>
  </body>

7、多选框双向数据绑定

 <body>
    <div id="app">
      <span>选择你喜欢的队伍:</span>
      <label> <input type="checkbox" value="JFH" v-model="teams" /><span>JFH</span> </label>
      <label> <input type="checkbox" value="GNH" v-model="teams" /><span>gnh</span> </label>
      <label> <input type="checkbox" value="GTH" v-model="teams" /><span>GTH</span> </label>
      <label> <input type="checkbox" value="JUH" v-model="teams" /><span>JUH</span> </label>
      <label> <input type="checkbox" value="YRD" v-model="teams" /><span>YRD</span> </label>

      <p>喜欢的队伍有：{{teams.join('、')}}</p>
    </div>

    <script src="./vendor/vue.js"></script>
    <script>
      //多选操作：需要数组来存放选项
      new Vue({
        el: "#app",
        data: { teams: [] },
      });
    </script>
  </body>

8、多选框的单独使用

 <body>
    <div id="app">
      <label>
        <input type="checkbox" v-model="agree" />
        <span>同意软件的用户协议</span>
      </label>
      <br />
      <p>{{agree?"同意":"不同意"}}</p>
      <button :disabled="!agree">注册</button>
    </div>

    <script src="./vendor/vue.js"></script>
    <script>
      //多选框单独使用，应该绑定Boolean值
      new Vue({
        el: "#app",
        data: { agree: false },
      });
    </script>
  </body>

9、动态样式

动态样式

:style="{属性名：值}" 属性名不允许有-，使用小驼峰/字符串包围

:class="{样式类：true/false}"，true生效，false无效

    <div id="app">
      <button @click="count++">{{count}}</button>
      <div :style="{'font-size': count+'px'}">hello world!</div>
      <hr>
      <!-- count是偶数显示danger样式，奇数显示success样式 -->
      <div :class="{danger:count%2==0,success:count%2==1}">下课课。吱吱吱</div>
    </div>

    <script src="./vendor/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: { count: 20 },
      });
    </script>

黑猫了个怪怪

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue基础 - 02 （双向数据绑定、实时监听输入框、键盘事件监听、watch监听器、单选框、下拉选框、多选框、多选框单独使用、动态样式class/style）

1、双向数据绑定方向1 - 数据绑定到DOM元素上方向2 - DOM变化更新绑定的数据表单元素：输入框，单选框，多选框...，用户可以操作来修改其值 -- 把用户操作的值更新给数据v-model：数据绑定值的同时，DOM变化也会修改变量，用来快速获取form表单元素的值2、实时监听输入框@input：输入框内容变化时触发 <div id="app"> &...
复制链接

扫一扫