vue.js常用命令

最新推荐文章于 2022-06-15 17:24:33 发布

Dark Sky.

最新推荐文章于 2022-06-15 17:24:33 发布

阅读量135

点赞数

分类专栏： java 前端文章标签： vue.js node.js javascript html vue

本文链接：https://blog.csdn.net/Dark_Blue__/article/details/108939480

版权

java 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

vue.js常用命令

1.v-model: 实现双向数据绑定
1) 由模型数据绑定到dom对象,模型数据的值改变,Dom对象的值跟着改变
2) 由Dom对象绑定到模型数据,Dom对象的值改变,模型数据的值跟着改变
注意:v-model这个命令的应用范围由局限性,只能在input输入框,select下拉框,textarea文本输入框,components(vue中的组件)
2.v-text:解决闪烁的问题
v-text可以将一个变量的值渲染到指定的元素中,它可以解决插值表达式闪烁的问题
3.v-on:监听用户的事件
4.v-bind:可以将数据对象绑定在dom的任意属性中,v-bind可以给dom对象绑定一个或多个特性,例如动态绑定style和class,但是无法双向数据绑定,只能把模型数据绑定到dom对象上
5.v-if:判断,如果要显示所有的内容,一般和v-else一起使用
6.v-for:循环调用
小demo

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue.js常用指令的测试</title>
</head>
<body>
<!--body体里面的内容是MVVM中view视图部分的内容-->
  <div id="app">
      <!--{{name}}-->
      <a v-bind:href="url">
      <span v-text="name"></span>
      </a>
      <input type="text" v-model="num1"/> +
      <input type="text" v-model="num2"/> =
      <!--{{Number.parseInt(num1)+Number.parseInt(num2)}}-->
      <!--<span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>-->
      <span v-text="result"></span>
      <button v-on:click="change">点击计算</button>
      <div v-bind:style="{fontSize: size + 'px'}">java</div>
  </div>
</body>
<script src="vue.min.js"></script><!--导入vue.js类库-->
<script>
    //script里面编写MVVM中model和viewmodel中的内容
    var VM = new Vue({
        el:'#app',//vm接管了app区域的管理
        data:{//model数据
            name:'好好学习,天天向上!',
            num1:0,
            num2:0,
            result:0,
            url:'https://www.baidu.com',
            size:33
        },
        methods:{
          change:function () {
              this.result = Number.parseInt(this.num1) + Number.parseInt(this.num2)
          }
        }
    })
</script>
</html>

demo2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js常用指令的测试</title>
</head>
<body>
<!--body体里面的内容是MVVM中view视图部分的内容-->
  <div id="app">
      <ul>
          <!--遍历list集合,只显示下标为偶数的行-->
          <li v-for="(item,index) in list" :key="index" v-if="index % 2 == 0">{{index}} -- {{item}}</li>
          <li v-for="(value,key) in user">{{key}} -- {{value}}</li>
          <li v-for="(item,index) in userList" :key="item.user.uname" v-if="item.user.age >= 6">
              <div v-if="item.user.uname == 'tom'" style="background: #ff00ff">
                  {{index}}--{{item.user.uname}}--{{item.user.age}}
              </div>
              <div v-else="">
                  {{index}}--{{item.user.uname}}--{{item.user.age}}
              </div>
          </li>
      </ul>
  </div>
</body>
<script src="vue.min.js"></script><!--导入vue.js类库-->
<script>
    //script里面编写MVVM中model和viewmodel中的内容
    var VM = new Vue({
        el:'#app',//vm接管了app区域的管理
        data:{//model数据
            list:[1,2,3,4,5,6],
            user:{uname:'tom',age:10},
            userList:[
                {user:{uname:'tom',age:10}},
                {user:{uname:'anmy',age:6}},
                {user:{uname:'jack',age:18}}
            ]
        }
    })
</script>
</html>

Dark Sky.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue.js常用命令

vue.js常用命令1.v-model: 实现双向数据绑定1) 由模型数据绑定到dom对象,模型数据的值改变,Dom对象的值跟着改变2) 由Dom对象绑定到模型数据,Dom对象的值改变,模型数据的值跟着改变注意:v-model这个命令的应用范围由局限性,只能在input输入框,select下拉框,textarea文本输入框,components(vue中的组件)2.v-text:解决闪烁的问题v-text可以将一个变量的值渲染到指定的元素中,它可以解决插值表达式闪烁的问题3.v-on:监听用户
复制链接

扫一扫