Vue——属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、过滤案例

vm对象

<body>
<div id="app">
    <h1>{{name}}</h1>
    <button @click="handleClick">点我</button>
</div>
</body>
<script>
    // 1 写在data或method中的属性或方法，从vm中直接可以点出来
    // 2 method的函数中，如果想使用data或methods中的属性，直接this点名字就可以了
    let vm = new Vue({
        el: '#app',
        data: {
            name: 'xxx',
            age: 19,
        },
        methods: {
            handleClick() {
                console.log(this)
                this.handleClick1()
            },
            handleClick1() {
                console.log(this)
                this.name = '彭于晏'
            }
        }
    })
</script>

函数传参

<body>
<div id="app">
    <h1>函数，可以多传参数，也可以少传参数，都不会报错</h1>
    <button @click="handleClick('xxx')">点我</button>
    <h1>事件对象，调用函数，不传参数，会把当前事件对象，传入，可以不接收，也可以接收</h1>
    <button @click="handleClick2">点我2</button>
    <br>
    <button @click="handleClick3('xxx',$event)">点我3</button>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            handleClick(name, age) {
                console.log(name, age)
            },
            handleClick2(event) {
                console.log(event)
            },
            handleClick3(name, event) {
                console.log(name)
                console.log(event)
            }
        },
    })
</script>

属性指令

// 标签上   name   id  class  src  href ,height  属性
// 如果这样，name='xx' 就写死了，我们想动态的绑定变量，变量变化，属性的值也变化

//  v-bind:属性名='变量' 可以简写成  :属性名='变量'
<body>
<div id="app">
    <hr>
    <button @click="handleClick">点我变大</button>
    <img :src="url" alt="" :height="h" width="w">
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            url: 'https://img2.woyaogexing.com/2023/06/01/11de6aa55c3ccc0fc35ba1ab6e4ae2b5.jpg'
            h: '200px',
            w: '200px'
        },
        methods: {
            handleClick() {
                this.h = '400px'
                this.w = '400px'
            },
        }
    })
</script>

style和class

// style 和 class也是属性，可以使用属性指令  :class=   :style=
// 但是他们比较特殊，单独再讲

    <style>
        .size {
            font-size: 60px;
        }

        .red {
            background-color: red;
        }

        .yellow {
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>class的使用:字符串，数组，对象</h1>
    <button @click="handleClick">点我变样式</button>
    <br>
    <div :class="class_arr">
        我是div
    </div>

    <h1>style的使用:字符串，数组，对象</h1>
    <br>
    <div :style="style_obj">
        我是div
    </div>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            // class 推荐使用 数组方式
            // class 绑定的变量，类型可以是 字符串，数组，对象
            // class_str: 'size', // vm.class_str='size red'
            class_arr:['red'], // 给该变量，追加值，class变化，页面会发生变化：vm.class_arr.push('size')
            // class_obj:{size:true,red:false}  // 对象的用法，必须先提前设置，后期通过修改true或false控制类
            // class_obj:{size:true},  // 但是不能往对象中放之前不存在的值，放不存在的值，没有响应式

            // style 推荐使用 对象形式
            // style_str:'font-size:80px;background-color:green',  // vm.style_str='background-color: red'
            // style_arr: [{'font-size':'60px'}]  // vm.style_arr.push({'background-color':'red'})
            // style_obj:{'font-size':'60px','backend-color':'green'}
            style_obj:{fontSize:'60px',color:'green'},// 省略key值的引号后，要变成驼峰形式
            // 有以下三种写法 Vue.set(this.style_obj,'color','red')或者this.style_obj['color'] = 'pink'或者this.style_obj.fontSize = '20px'
        },
        methods: {
            handleClick() {
                // this.class_obj.yellow = true // 直接放，没有响应式
                Vue.set(this.style_obj,'color','red')  // 这样才有响应式
            }
        }
    })
</script>

条件渲染

<body>
<div id="app">
  <div v-if="score>90&&score<=100">优秀</div>
  <div v-else-if="score>80&&score<=90">良好</div>
  <div v-else-if="score>60&&score<=80">及格</div>
  <div v-else>不及格</div>
</div>
</body>
<script>
  let vm = new Vue({
    el:'#app',
    data:{
      score:92
    },
  })
</script>

列表渲染

// 循环渲染一些数据，比如购物车的数据
// v-for：循环字符串，数组，数字，对象
// 有购物车数据，循环显示在页面中
// 借助于bootstrap + Vue

<div id="app">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <h1 class="text-center">购物车</h1>
                <div class="pull-right">
                    <button class="btn btn-danger" @click="handleClick">加载购物车</button>
                </div>
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>id号</th>
                        <th>商品名</th>
                        <th>商品价值</th>
                        <th>商品数量</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="good in good_list">
                        <th>{{good.id}}</th>
                        <td>{{good.name}}</td>
                        <td>{{good.price}}</td>
                        <td>{{good.count}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            good_list:[],
        },
        methods:{
            handleClick(){
                this.good_list = [
                    {'id': 1, 'name': '小汽车', 'count': 2, 'price': 100000},
                    {'id': 2, 'name': '脸盆', 'count': 1, 'price': 23},
                    {'id': 3, 'name': '方便面', 'count': 3, 'price': 6},
                    {'id': 4, 'name': '钢笔', 'count': 4, 'price': 5},
                ]
            }
        }
    })
</script>

v-for循环其他类型

// 数字 字符串 数组 对象
// 看到别人写v-for时，在标签上都会加一个 key 属性，目的是为了提高虚拟dom的替换效率
<el-carousel-item v-for="item in 4" :key="item">
// key的值必须唯一 如果不唯一就报错
    
###### 以后如果数据变了，页面没有发生变化#####
Vue.set(对象, key, value)
Vue.set(数组, 索引, 值)
    
<body>
<div id="app">
  <h1>循环数字</h1>
  <ul>
    <li v-for="(value,index) in number">{{value}}-----------{{index}}</li>
  </ul>
  <h1>循环字符串</h1>
  <ul>
    <li v-for="(value,index) in str">{{value}}-----------{{index}}</li>
  </ul>
  <h1>循环数组</h1>
  <ul>
    <li v-for="(value,index) in arr">{{value}}------------{{index}}</li>
  </ul>
  <h1>循环对象(相对于python key和value是反的)</h1>
  <ul>
    <li v-for="(value,index) in obj">{{value}}------------{{index}}</li>
  </ul>
</div>
</body>
<script>
  let vm = new Vue({
    el:'#app',
    data:{
      number:10,
      str:'XxMa',
      arr:[11,22,33,44,55],
      obj:{name:'xxx',age: 19,gender:'男'}
    }
  })
</script>

双向数据绑定 v-model

// 数据双向绑定---》只有input标签---》v-model 做双向数据绑定
// 咱们之前写的，其实都是数据的单向绑定
		修改js的值，页面变了

<body>
<div id="app">
    <h1>双向数据绑定</h1>
    <p>用户名<input type="text" v-model="username"></p>
    <p>用户名<input type="password" v-model="password"></p>
    <p>
        <button @click="handleSubmit">登录</button>
    </p>
</div>
</body>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            username:'xxx',
            password:'123',
        },
        methods:{
            handleSubmit(){
                console.log(this.username)
                console.log(this.password)
            }
        }
    })
</script>

事件处理

// 事件指令
	click:点击事件

// input标签的事件
	input:只要输入内容，就会触发
	change：只要输入框发生变化，就会触发
	blur：只要失去焦点，就会触发

<body>
<div id="app">
    <h1>input事件</h1>
    <input type="text" @input="handleInput" v-model="username">-----{{username}}
    <h1>change事件</h1>
    <input type="text" @change="handleChange" v-model="username1">------{{username1}}
    <h1>blur事件</h1>
    <input type="text" @blur="handleBlur" v-model="username2">-------{{username2}}
</div>
</body>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            username:'xxx',
            username1:'yyy',
            username2:'zzz'
        },
        methods:{
            handleInput(){
                console.log(this.username)
            },
            handleChange(){
                console.log(this.username1)
            },
            handleBlur(){
                console.log(this.username2)
            }
        }
    })
</script>

过滤案例(filter、indexOf)

<body>
<div id="app">
    <input type="text" v-model="search" @input="handleInput">
    <hr>
    <ul>
        <li v-for="item in new_dataList">{{item}}</li>
    </ul>
</div>
</body>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            search:'',
            dataList: ['a', 'at', 'atom', 'attoo', 'be', 'beyond', 'cs', 'csrf'],
            new_dataList: ['a', 'at', 'atom', 'attoo', 'be', 'beyond', 'cs', 'csrf'],
        },
        methods:{
            // handleInput(){
            //     console.log(this.search)
            //     // 根据用户输入的search，对数组进行过滤，剩下只有包含输入文字的字符串
            //     var _this = this
            //     this.new_dataList = this.dataList.filter(function(item){
            //         if (item.indexOf(_this.search)>=0){
            //             return true
            //         }else {
            //             return false
            //         }
            //     })
            // }

            // handleInput(){
            //     console.log(this.search)
            //     var _this = this
            //     this.new_dataList = this.dataList.filter(function(item){
            //         return item.indexOf(_this.search) >= 0
            //     })
            // }

            handleInput(){
                this.new_dataList = this.dataList.filter(item=>item.indexOf(this.search)>=0)
            }
        }
    })


    // 补充
    // 1 数组的过滤
    // var arr = ['a', 'at', 'atom', 'attoo', 'be', 'beyond', 'cs', 'csrf']
    // // 数组.filter(匿名函数，接收一个参数，函数必须返回true或false，如果返回true，表示这个值保留)
    // var new_arr = arr.filter(function(item){
    //     console.log(item)
    //     if (item.length>3){
    //         return true
    //     }else {
    //         return false
    //     }
    // })
    // console.log(new_arr)

    // 2 判断一个字符串是否在另一个字符串中
    // var s = 'is'
    // var s1 = 'XxMa is me'
    // var res = s1.indexOf(s)  // s的索引位置，如果大于等于0，说明s在s1中
    // console.log(res)

    // 3 过滤出 数组中有at的字符串
    // var arr = ['a', 'at', 'atom', 'attoo', 'be', 'beyond', 'cs', 'csrf']
    // var search = 'at'
    // var new_arr = arr.filter(function(item){
    //     if (item.indexOf(search)>=0){
    //         return true
    //     }else {
    //         return false
    //     }
    // })
    // console.log(new_arr)
</script>

作者：XxMa

出处：https://www.cnblogs.com/XxMa/p/17453283.html

版权：本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

posted @   程序猿小Ma  阅读(77)  评论(0)  编辑  收藏  举报
相关博文：
·  Vue——表单控制、购物车案例、v-model进阶、与后端交互三种方式、箭头函数
·  Vue——计算属性、监听属性、Vue生命周期、组件介绍和使用、组件间通信、ref属性
·  事件指令，属性指令，style和class，条件列表渲染，事件处理，数据双向绑定，过滤
·  Vue基础之事件指令，属性指令，class和style，条件和列表渲染，事件处理和数据双向绑定
·  前端vue之属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制、v-model进阶
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· AI Agent开发，如何调用三方的API Function，是通过提示词来发起调用的吗
more_horiz
keyboard_arrow_up dark_mode palette
选择主题
点击右上角即可分享
微信分享提示