vue指令

最新推荐文章于 2024-08-15 14:47:41 发布

path859

最新推荐文章于 2024-08-15 14:47:41 发布

阅读量79

点赞数

文章标签： java servlet 开发语言

本文链接：https://blog.csdn.net/weixin_60732674/article/details/125713226

版权

vue指令

v-text:将文本渲染
v-html:将文本解析成html代码
v-if、v-show:条件渲染，条件为真时渲染数据为假时数据不显示
v-for(常用):循环遍历
v-on(常用):事件操作，可以简写成@
- 事件修饰符
  1. .once:单次事件
  2. .prevent:阻止默认事件
  3. .stop:冒泡
  4. .capture:捕获事件(谁有该事件就先触发谁)
  5. .self:自身事件
v-model(重要):能够实现和表单控制的双向绑定
- v-model的修饰符
  1. .lazy:文本框、文本域失去焦点时，才会和框中的数据同步
  2. .trim:失去焦点时过滤掉空格
  3. .number:将输入的数据变为number类型，如果数据无法转换成number,那么就还是原始的类型

v-bind:主要用于属性的绑定,比如class属性、style样式,只要是属性就需要v-bind,可以动态改变样式

动态绑定class

以对象的形式绑定

 <p v-bind:class="{pcolor:true}">人工智能无所不能</p>

以数组的形式绑定

 <!-- 以数组的形式绑定:数组的格式是以数据的形式绑定 v-bind可以省略-->
 <p :class="[changecolor]">选择人工走向成功</p>

绑定style

直接绑定样式

 <p v-bind:style="{color:'red'}">人工智能无所不能</p>

绑定data里的值

 <!-- 绑定data里的值:值是以对象形式存在的 -->
 <p :style="data1">人工智能无所不能</p>
 data(){
         return{
             // 定义对象
             data1:{
                 // 定义数据
                 color:"red",
             }
         }
     }

以数组的形式绑定

  <p :style="[data1]">人工智能无所不能</p>
 data(){
         return{
             // 定义对象
             data1:{
                 // 定义数据
                 color:"red",
             }
         }
     }

绑定计算属性

  <!-- 以计算属性的形式绑定 -->
 <p :style="pcolor">人工智能无所不能</p>
  // 计算属性要写到computed里 和data methods是同级关系
     computed:{
         // 变量名是自己随便定义的 计算属性里必须有返回值 返回的内容就是上边定义的变量
         // pcolor等同于 {color:"red"}
         pcolor:function(){
             return{
                 color:'red',
             }
         }
     }

数据渲染的方式

插值表达式(常用):{{}}

创建vue组件

在src下的components文件夹里创建vue组件,组件名采用大驼峰(每个单词的首字母大写)命名法
打出vue的基本结构快捷键 vue
在App.vue中引用注册使用自己创建的组件
启动项目 npm run serve

思路分析

渲染数据

先有数据数据存放到data里
将数据渲染到页面表格
实现对应的功能比如删除添加修改等

删除数据

给按钮绑定事件
实现删除的操作

添加数据

需求:就是在原有的数据上添加新的数据，增加
有添加的样式-----(表单--文本框、按钮)
将表单输入的内容添加成功
- 获取表单中的数据---数据的双向绑定
- 点击按钮将数据添加成功
  1. 给按钮绑定事件
  2. 将表单中输入的数据添加成功
  3. 单选、复选、下拉框都需要写value(值)

    <!-- 添加样式 v-model:代表数据的双向绑定-->
       <p>编号:<input type="text" v-model="id1"></p>
       <p>姓名:<input type="text" v-model="name1"></p>
       <p>年龄:<input type="text" v-model="age1"></p>
       <p>性别:<input type="text" v-model="gender1"></p>
       <p>
           <!-- 给按钮绑定点击事件 -->
           <button @click="add">添加</button>
       </p>
       data(){
         return{
             id1:0,
             name1:'',
             age1:0,
             gender1:'',
             
         }
     },
      // 数据的添加
         add(){
             // 实现添加的功能   将数据添加到数组里  数组名.push(数据)
             // 定义一个对象 用来作为添加的数据
             var obj = {id:this.id1,name:this.name1,age:this.age1,gender:this.gender1}
             // 将obj添加到数组里
             this.lst.push(obj)
         }

计算属性

定义2个文本框，一个代表商品的单价一个代表商品的数量，输入商品单价和数量在下边显示总价

 <template>
   <div>
       <!-- 定义2个文本框，一个代表商品的单价一个代表商品的数量，输入商品单价和数量在下边显示总价 -->
     <!-- 数据的双向绑定，获取文本框中的内容 -->
     <!-- 数量小于3不打折 3件打8折 4件打7折 4件以上打6折 -->
     <p>单价:<input type="text" v-model="price"></p>
     <p>数量:<input type="text" v-model="num"></p>
     总价为:{{totalmoney}}
   </div>
 </template>
 
 <script>
 export default {
     data(){
         return{
             price:0,
             num:0
         }
     },
     // 使用计算属性计算总价 计算属性必须有返回值 返回的内容等同于定义的变量
     computed:{
         // totalmoney等同于 money
         totalmoney:function(){
             var money = 0;
             // 如果数量小于3原价
             if(this.num < 3){
                 // 不打折
                 money = this.price*this.num
             }else if(this.num == 3){
                 // 否则如果数量等于3那么打8折
                 money = this.price*this.num*0.8
             }else if(this.num == 4){
                 // 否则如果数量等于4那么打7折
                 money = this.price*this.num*0.7
             }else if(this.num > 4){
                 // 否则如果数量大于4那么打6折
                 money = this.price*this.num*0.6
             }
             return money 
         }
     }
 
 }
 </script>
 
 <style>
 
 </style>

总结