当前位置：首页 > news >正文

vue查缺补漏

news 2024/10/22 11:37:26

之前学习过vue基础，在工作上使用的时候也没有什么问题。最近在看30分钟学会Vue之核心语法,发现有一些不常用的、但挺重要的都快忘掉了，在此补漏一下。

请添加图片描述

搭建演示环境

创建index.html 导入 vue.min.js文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><p>{{ msg }}</p>
</div>
<script src="./vue.min.js"></script>
<script>const vm = new Vue({el: '#app',data() {return {msg: 'Hello World',}}})
</script>
</body>
</html>

1. 内容指令

    <p v-text="msg">1111</p><p v-html="msg">1111</p>

不显示1111，显示msg内容 v-html 解析msg中的html标签

2. console.log 打印

console.log(newVal,oldVal);

console打印可以直接进行参数拼接，并不需要+进行连接

3. for 遍历对象打印属性

   <p v-for="(item,key,index) in 5">item:{{ item }},key:{{ key }},index:{{ index }}</p><p v-for="(item,key,index) in obj">item:{{ item }},key:{{ key }},index:{{ index }}</p>obj: {name: 'gggg', age: 1111}

item:1,key:0,index:item:2,key:1,index:item:3,key:2,index:item:4,key:3,index:item:5,key:4,index:item:gggg,key:name,index:0item:1111,key:age,index:1

4. 放到标签上进行文本提示

    <p title="这是内容">{{ msg }}</p>

请添加图片描述

5. input自动去空格

        <input type="text" v-model.trim="inputVal"/>

6. style、class绑定

在uniapp开发的时候，也会使用当时云里雾里的。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><!--  前面两种指定style中定义的内容，必须使用'字符串'，用,分割--><!-- key:value  key 自动转为字符串 --><div v-bind:class="{ textColorCls: textColorFlag,bgColorCls: bgColorFlag}">111111</div><!-- 直接使用字符串，内嵌的对象，或者三元表达式 --><div v-bind:class="[ 'textColorCls', {bgColorCls: bgColorFlag},textSizeFlag? 'textSizeCls' : '']">111111</div><!-- 使用data中定义的 包含style的集合 --><div v-bind:class="textColorClassObj">2222</div><!-----------------------------不支持 {textSizeClassObj:  textSizeFlag}, ---------------------------------------><div v-bind:class="[textColorClassObj,  bgColorFlag ? bgColorClassObj:'']">2222</div><div v-bind:style="{ color: textColor, fontSize: fontSize + 'px' }">333333</div><div v-bind:style="textColorStyleObj">44444</div><!-----------------------------不支持{textSizeStyleObj:true} ---------------------------------------><div v-bind:style="[{ background: bgColor}, textColorFlag ? textColorStyleObj:'']">44444</div></div>
<script src="./vue.min.js"></script><style>.textColorCls {color: red;}.bgColorCls {background: #ff0;}.textSizeCls {font-size: 30px;}
</style><script>const vm = new Vue({el: '#app',data() {return {textColor: 'red',bgColor: 'yellow',fontSize: 30,bgColorFlag: true,textSizeFlag: true,textColorFlag: true,//这两个不能混用textColorClassObj: {textColorCls: true //只能指定class,并且必须写'显示'逻辑.},bgColorClassObj: {bgColorCls: true //只能指定class,并且必须写'显示'逻辑.},textSizeClassObj: {textSizeCls: true //只能指定class,并且必须写'显示'逻辑.},textColorStyleObj: {color: 'red',},textSizeStyleObj: {'font-size': 30 + 'px',},}},})
</script>
</body>
</html>

查看全文

http://www.mrgr.cn/news/54422.html