2-vue-模版语法、列表渲染、文本指令(v-html、v-show、v-if)、事件指令 v-on 、属性指令、vue中的style和class、条件渲染、列表渲染、v-for循环

已于 2023-11-08 20:31:12 修改
阅读量228 收藏
点赞数
分类专栏： vue 文章标签： vue.js v-on v-if v-for v-html v-show v-text
于 2023-09-15 21:37:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44145338/article/details/132906907
版权

1 vue的模版语法

2 vue的文本指令
2.1 模版语法 v-text
2.2 文本指令 v-html
2.3 文本指令 v-show
2.4 文本指令 v-if
2.5 v-show把图片的显示隐藏

3 vue的事件指令
ES6对象语法演变
3.1 v-on 不传参/a>
3.2 v-on 传参和 v-on:简写成@

4 vue的属性指令
4.1 属性指令之 v-bind: 简写成 :
4.2 用属性指令切换图片
4.3 属性指令之 class 属性

5 vue的style和class
5.1 style 字符串类型
5.2 style 数组类型
5.3 style 对象类型
5.4 class是字符串类型
5.5 class是数组类型
5.6 class是对象类型

6 vue的条件渲染

7 vue列表渲染
7.2 v-for能循环的

1 模版语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="./js/vue.js"></script>

</head>
<body>
<div id="app">
    <h1>模板语法</h1>
    
    <p>渲染字符串-姓名：{{ name }}</p>
    <p>渲染字符串-年龄：{{ age }}</p>

    <p>渲染-数组：{{ list1 }}</p>
    <p>渲染-数组-按位置取值：{{ list1[1] }}</p>

    <p>渲染-对象：{{ obj1 }}</p>
    <p>渲染-对象-按key取值：{{ obj1.name }}</p>
    <p>渲染-对象-按key取值：{{ obj1['age'] }}</p>

    <p>渲染-标签-字符串(是因为它默认处理了xss攻击)：{{ link1 }}</p>

    <p>三目运算符(10>9)：{{10>9 ? true:false}}</p>
    <p>三目运算符(对象的长度大于2吗)：{{list1.length > 2 ? '大于2': '不大于2'}}</p>

    <p>简单表达式(99 + 1=)：{{ 99 + 1 }}</p>

    <!-- <p>函数(渲染出函数的返回结果)：{{ add(1, 2) }}</p> -->

</div>
</body>
</html>

<script>

    new Vue({
        el: '#app',
        data: {
            name: 'lin',
            age: 18,
            list1: [1, 2, 3, 4],  // 数组
            obj1: {name: 'today', age: 20},  // 对象
            link1: '<a href="https://www.baidu.com">百度一下</a>',
        }

    })


    // 定义变量
    let list1 = [1, 2, 3, 4]
    let res = list1.length < 2 ? '大于2': '不大于2'
    console.log(res)

</script>

2 文本指令

# vue 的指令系统 ，放在标签,以v-开头的，每个指令都有特殊用途
v-text:把字符串内容渲染到标签内部
v-html:把字符串内容渲染到标签内部，但如果是标签字符串，会渲染成标签
v-show:控制标签显示与否:通过style的display是否等于none控制，在html中还存在
v-if:控制标签显示与否:通过dom操作做的，这个标签从dom中删除了

2.1 文本指令 v-text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>文本指令 v-text v-html</h1>
    <h2>文本指令之 v-text，把字符串内容渲染到标签内部</h2>
    <!-- 之前是用模板语法的插值语法，现在用文本指令 -->
    <p>{{name}}</p>

    <!-- 文本指令 -->
    <p v-text="name"></p>
    <p v-text="link1"></p>
 
</div>
</body>
</html>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            name: 'lin',
            link1: '<a href="https://www.baidu.com">百度一下</a>',
            isShow: true,
            ifShow: true,
        }
    });
</script>

2.2 文本指令 v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>文本指令 v-html</h1>
    <h2>文本指令之 v-html，把字符串内容渲染到标签内部，但如果是标签字符串，会渲染成标签 </h2>
    <h3>把标签字符串渲染成标签使用</h3>
    <p v-html="link1"></p>
</div>
</body>
</html>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            name: 'lin',
            link1: '<a href="https://www.baidu.com">百度一下</a>',
        }
    });
</script>

2.3 文本指令 v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>文本指令 v-show</h1>
    <h2>v-show 控制的是标签 显示与否:通过style的display是否等于none控制，在html中还存在</h2>
    <div>
        <p v-show="isShow">我是p标签</p>
    </div>
</div>
</body>
</html>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            isShow: true,
            ifShow: true,
        }
    });
</script>

2.4 文本指令 v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="./js/vue.js"></script>

</head>
<body>
<div id="app">
    <h2>v-if 控制的是标签 显示与否:通过dom操作，这个标签从dom中删除了</h2>
    <div>
        <span v-if="ifShow">我是span标签</span>
    </div>
</div>
</body>
</html>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            ifShow: true,
        }
    });
</script>

2.5 v-show把图片的显示隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>文本指令 v-show</h1>
    <h2>用v-show 展示图片或隐蔽</h1>
    <div>
        <button @click="handleShow">点我看风景</button>
        <br>
        <img src="./img/1.webp" alt="" width="300" height="300" v-show="showPhoto">
    </div>
</div>
</body>
</html>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            showPhoto: false
        },
        methods: {
            handleShow(){
                this.showPhoto = !this.showPhoto
            }
        }
    });

</script>

3 事件指令

# 用v-on绑定事件后，只要触发事件，就会执行函数
	v-on:点击事件，双击事件，滑动事件 ='函数'
        
# 用的最多的就是click事件 ，单击事件


# v-on:click=‘函数’---》放在标签上，点击标签，就会触发函数执行---》函数必须写在methods中，可以用es6语法的简写
  methods: {
       // handleClick: function () {
       //     alert('美女')
       // },
       
       handleClick() {  // es6 语法
           alert('美女')
       },
   }



# v-on: 可以使用 @ 替换

ES6对象语法演变

// ES6 对象写法

    var userinfo = {"username": "lin", "password": "123"}
    // 可写成下面这种：
    var userinfo = {username: "lin", password: "123"}

    var username = "lin"
    var password = "123"
    // var userinfo = {username: username, password:password}
    // 可写成下面这种：
    // 放个变量到对象中，会把变量名作为key,值作为value
    var userinfo = {username, password}

    console.log(userinfo['username'])
    console.log(userinfo.username)

    var userinfo = {
        username: "lin",
        password: "123",
        printName: function () {
            console.log(this.username)
        }
    }
    // 调用函数
    userinfo.printName()

    // 演变
    var printName = function () {
            console.log(this.username)
    }

    var userinfo = {
        username: "lin",
        password: "123",
        printName() {
             console.log(this.username)
        }
    }

3.1 v-on 不传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>事件指令</h1>
    <button v-on:click="handleClick">点我,看风景</button>
</div>
</body>
</html>

<script>
    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            handleClick(){
                alert('hello')
            }
        }
    });
</script>

3.2 v-on 传参和 v-on:简写成@

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>事件指令</h1>

    <button v-on:click="handleClick">点我,看风景</button>

    <br>
    <button v-on:click="handleClick1">点我，传参数, 如果不传，默认第一个参数是：点击事件对象：PointerEvent</button>

    <br>
    <button v-on:click="handleClick1(1)">点我，传一个参数,只要穿了参数，点击事件对象就不传了</button>

    <br>
    <button v-on:click="handleClick1(1, 2)">点我，传两个参数,正常使用</button>

    <br>
    <button v-on:click="handleClick1(1, 2, 3)">点我，传多个参数,只用前两个</button>

    <br>
    <button v-on:click="handleClick1(1, $event)">点我，传第一个参数,第二个是点击事件</button>

    <hr>

    <h1>把 v-on: 简写  @ </h1>
    <button @click="handleClick">点我,看风景</button>
</div>
</body>
</html>

<script>
    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {
           
        }
    });
</script>

4 属性指令

# 每个标签都会有属性，动态替换属性的值，就要用到属性指令

# v-bind:属性='变量'  ---》针对所有标签的所有属性  id name
# 简写成  :属性='变量'
	:id='变量'
    :name='变量'
        
        
# 切换图片案例--》点击就修改src属性

4.1 属性指令之 v-bind: 简写成 : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>属性指令</h1>
    <div>
        <button @click="handleClick">点我，有风景</button><br>
        <button @click="handleClick1">点我，变大风景</button><br>
<!--        <img v-bind:src="img_url" v-bind:width="width" v-bind:height="height">-->
        <p>属性简写，就是把 v-bind: 简写成 : </p>
        <img :src="img_url" :width="width" :height="height">
    </div>
</div>
</body>
</html>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            img_url: '',
            width: 300,
            height: 300,
        },
        methods: {
            handleClick(){
                this.img_url = './img/2.webp'
            },
            handleClick1(){
                this.width = '500px';
                this.height = '500px';
            }
        }
    });
</script>

4.2 用属性指令切换图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>属性指令</h1>
    <div>
        <button @click="handleClick">点我，有风景</button><br>
        <button @click="handleClick1">点我，变大风景</button><br>
<!--        <img v-bind:src="img_url" v-bind:width="width" v-bind:height="height">-->
        <p>属性简写，就是把 v-bind: 简写成 : </p>
        <img :src="img_url" :width="width" :height="height">
    </div>

    <hr>

    <h1>点击按钮，切换图片</h1>
    <button @click="handleChange">点我换风景</button><br>
    <img :src="img_url2" width="400px" height="400px">


</div>
</body>
</html>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            img_url: '',
            width: 300,
            height: 300,

            img_url2: './img/2.webp',
            img_list: ['./img/2.jpg', './img/3.jpg', './img/4.jpg', './img/5.jpg', './img/6.jpg', './img/5.webp', './img/6.webp']
        },
        methods: {
            handleClick(){
                this.img_url = './img/2.webp'
            },
            handleClick1(){
                this.width = '500px';
                this.height = '500px';
            },
            handleChange(){
                this.img_url2 = this.img_list[Math.floor(Math.random() *  this.img_list.length)]
            }

        }

    });

</script>

4.3 属性指令之 class 属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <style>
        .red {
            color: rgba(255, 104, 104, 0.7);
        }
        .purple {
            color: rgba(104, 104, 255, 0.7);
        }
    </style>
</head>
<body>
<div id="app">
    <h2>class属性</h2>
    <button @click="handleChangeClass">点我变样式</button>
    <div :class="isActive ? 'red': 'purple'">
        <h1>我是一个div</h1>
    </div>
</div>
</body>
</html>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            isActive: false
        },
        methods: {
            handleChangeClass(){
                this.isActive = !this.isActive
            },
        }
    });
</script>

5 style和class

5.1 style是字符串类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>style和class:能够绑定什么类型的变量：字符串，数组，对象</h1>

    <div :style="style_str">
        <button @click="handleSmall">点击变细</button>
        <p>我是div中的p标签</p>
    </div>
</div>
</body>
</html>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            // style是字符串类型
            style_str: 'background: red; font-size: 60px; font-weight: bold',
        },
        methods: {
            handleSmall(){
                this.style_str = 'background: red; font-size: 60px;'
            }
        }
    });
</script>

5.2 style是数组类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>style和class:能够绑定什么类型的变量：字符串，数组，对象</h1>

    <div :style="style_list">
        <button @click="handleSmall">点击变细</button>
        <p>我是div中的p标签</p>
    </div>

</div>
</body>
</html>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            // style是数组类型
            style_list: [{background: 'red'},{'font-size': '60px'},{'font-weight': 'bold'}]
        },
        methods: {
            handleSmall(){
                this.style_list.pop()
            }
        }

    });

</script>

5.3 style是对象类型(推荐使用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>style和class:能够绑定什么类型的变量：字符串，数组，对象</h1>
    <div :style="style_obj">
        <button @click="handleSmall">点击变细</button>
        <button @click="handleFontSmall">点击字体变小</button>
        <p>我是div中的p标签</p>
    </div>
</div>
</body>
</html>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            // style:是对象类型(建议用对象，对象好控制)
            style_obj:{background: 'red', fontSize: '60px', fontWeight: 'bold'},
        },
        methods: {
            handleFontSmall(){
                this.style_obj.fontSize = '30px'
            }
        }
    });
</script>

5.4 class是字符串类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <style>
        .big{
            font-size: 60px;
        }
        .back{
            background-color: greenyellow;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>style和class:能够绑定什么类型的变量：字符串，数组，对象</h1>
    <h2>class绑定字符串、数组、对象</h2>
    <div :class="class_str">
        <button @click="handleRemoveBackgroud">点击去掉背景</button>
        <p>我是div中的p标签</p>
    </div>
</div>
</body>
</html>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            // class是字符串类型
            class_str: 'big back'
        },
        methods: {
            handleRemoveBackgroud(){
                this.class_str='big'
            }
        }
    });
</script>

5.5 class是数组类型(推荐使用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <style>
        .big{
            font-size: 60px;
        }
        .back{
            background-color: greenyellow;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>style和class:能够绑定什么类型的变量：字符串，数组，对象</h1>
    <h2>class绑定字符串、数组、对象</h2>
    <div :class="class_list">
        <button @click="handleRemoveBackgroud">点击去掉背景</button>
        <button @click="handleBigFont">点击字体变大</button>-->
        <p>我是div中的p标签</p>
    </div>
</div>
</body>
</html>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            // class是数组类型
            class_list: ['big', 'back'],
        },
        methods: {
            handleRemoveBackgroud(){
                this.class_list.pop()
            },
            handleBigFont(){
                this.class_list.push('big')
            },
        }
    });
</script>

5.6 class是对象类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <style>
        .big{
            font-size: 60px;
        }
        .back{
            background-color: greenyellow;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>style和class:能够绑定什么类型的变量：字符串，数组，对象</h1>
    <h2>class绑定字符串、数组、对象</h2>
    <div :class="class_obj">
        <button @click="handleSmallFont">点击字体变小</button>
        <p>我是div中的p标签</p>
    </div>

</div>
</body>
</html>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            // class是对象类型
            class_obj:{big: true, back: true}
        },
        methods: {
            handleSmallFont(){
                this.class_obj.big = false
            }
        }

    });

</script>

6 条件渲染

条件关键字：
	v-if 
	v-else-if
	v-else

代码案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>条件渲染</h1>

    <span v-if="score >= 90">优秀</span>
    <span v-else-if="score >= 80 && score < 90">良好</span>
    <span v-else-if="score >= 60 && score < 80">及格</span>
    <span v-else>不及格</span>

</div>
</body>
</html>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            score: 82
        },

    });

</script>

7 列表渲染

# 列表渲染   v-for  显示多行

# 购物车案例+bootstrap

列表渲染案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="app">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="text-center">
                    <button class="btn btn-danger" @click="handleShow">点我显示购物车</button>
                    <button class="btn btn-danger" @click="handleDelete">删除最后一条</button>
                </div>

                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>id号</th>
                        <th>商品名字</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in good_list">
                        <th scope="row">{{item.id}}</th>
                        <td>{{item.name}}</td>
                        <td>{{item.price}}</td>
                        <td>{{item.count}}</td>
                    </tr>
                    </tbody>
                </table>

            </div>
        </div>
    </div>


</div>

</div>
</body>


<script>
    var vm = new Vue({
        el: '#app',
        data: {

            good_list: []

        },
        methods: {
            handleShow() {
                this.good_list = [
                    {id: 1, name: '钢笔', price: 9.9, count: 4},
                    {id: 2, name: '足球', price: 99, count: 4},
                    {id: 3, name: '篮球', price: 44, count: 32},
                    {id: 4, name: '电脑', price: 1299, count: 48},
                    {id: 5, name: '鼠标', price: 23, count: 4},
                    {id: 6, name: '脸盆', price: 8, count: 4},
                ]
            },
            handleDelete() {
                this.good_list.pop()
            }
        }


    })


</script>
</html>

7.2 v-for能循环的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="app">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <h1>循环数组--》见过了</h1>
                <p v-for="(value,index) in girls">第 {{index + 1}}个女神是：{{value}}</p>
                <h1>循环对象</h1>
                <p v-for="(value,key) in userinfo">key值是：{{key}}，value值是：{{value}}</p>
                <h1>循环字符串</h1>
                <p v-for="(value,index) in s">第 {{index}}个字母是：{{value}}</p>
                <h1>循环数字</h1>
                <p v-for="i in 10">{{i}}</p>

            </div>
        </div>
    </div>


</div>

</div>
</body>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            girls: ['刘亦菲', '迪丽热巴', '高圆圆'],

            userinfo: {name: 'lqz', age: 19, hobby: '篮球'},
            s: 'hello world'

        },
        methods: {}


    })


</script>
</html>

作业

# 把今天讲的所有内容，都敲一遍
-------

# 获取所有图书接口，vue+bootstrap+jquery的ajax，显示在前端
	-跨域问题
    
    
# 把uniapp，开发工具hbuilder下载，点击切换美女图片---》打包成安装apk---》安装到自己手机上
林光虚霁晓
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue通过v-html指令渲染的富文本无法修改样式的解决方案
10-15
主要介绍了vue通过v-html指令渲染的富文本无法修改样式的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue常用基本指令
weixin_45637035的博客
04-06 139
导入 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 创建一个 Vue 实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的： var vm = new Vue({ // 选项/属性 }) vue实例的选项 el 用于挂载元素，定义该vue对象的作用范围 data 用于定义变量属性 methods 用于定义函数 computed 计算属性，与methods类似
vue如何解析并显示包含页面标签的字符串
qq_30908729的博客
10-24 3480
vue如何解析并显示包含页面标签的字符串 解决方法： 使用v-html即可，例子如下所示：http://www.yayihouse.com/yayishuwu/chapter/2188
vue之模板语法、文本指令、事件指令、属性指令、style和class、循环渲染
菜CAI的博客
09-15 93
vue之模板语法、文本指令、事件指令、属性指令、style和class、循环渲染
JavaScript模板字符串
qq_52273362的博客
08-24 272
JavaScript模板字符串
es6：模板字符串
qq_43656748的博客
03-22 408
字符串格式化，使用 ${} 进行格式化。 示例1: const s = 'hello'; console.log(`say ${s}`); //执行结果 say hello 示例2: //旧代码，需要用 str.concat()进行字符串拼接 let imageSource = ''; let str1 = 'http://file/download?fileName='; let str2 = '&user=e'; imageSource = str1.
深入浅析Vue.js 中的 v-for 列表渲染指令
10-17
当遍历一个数组或枚举一个对象进行迭代循环展示时，就会用到列表渲染指令 v-for。这篇文章主要介绍了Vue.js 中的 v-for 列表渲染指令,需要的朋友可以参考下
Vue.js 中的 v-show 指令及用法详解
10-17
v-show 指令通过改变元素的 css 属性（display）来决定元素是显示还是隐藏。这篇文章主要介绍了Vue.js 中的 v-show 指令及用法详解,需要的朋友可以参考下
vue使用v-if v-show页面闪烁,div闪现的解决方法
10-17
在页面层次结构，数据较多的时候，用v-if或者v-show就会出现div闪现，或者部分闪烁的结果。怎么处理这样的问题呢，下面小编给大家带来了vue使用v-if v-show页面闪烁,div闪现的解决方法，一起看看吧
详解vue中v-on事件监听指令的基本用法
10-15
主要介绍了详解vue中v-on事件监听指令的基本用法，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
vue解析展示有组件的字符串
YoungtiNine的博客
01-20 1025
vue解析展示有组件的字符串 今天是()月()号？ 对上面的文字做成填空题的形式，括号能够进行输入 1.解析字符串 let str = '今天是(_)月(_)号？' let reg = /(\(_*\))/g let res = Array.from(str.match(reg)) res.forEach((item, index) => { // 这里就是双向数据绑定的答案对象，有由于不知道有几个空采用$set的形式就行设置 this.$set(this.blankAnswerObj,
es6--模板字符串
小白小白从不日别的博客
05-27 897
1.什么是模板字符串 模板字符串由一般字符串的单引号('')或双引号("")变为反引号(``) <script> //一般字符串 const str1 = 'female'; const str2 = "male"; // 模板字符串 const str3 = `age`; </script> 模板字符串与一般字符串的区别 模板字符串由一般字符串的单引号('')或双引号("")变为反引.
es6 模板字符串
kangkang_style的博客
04-03 537
模板字符串语法： es5写法： 需要使用大量的“”（双引号）和 + 来拼接才能得到我们需要的模版 实例： "He is <b>" + person.name + "</b> and we wish to know his" + person.age + ".That is all" es6写法： 用`（反引号）标识，用${}将变量括起来 ...
模板字符串
于昊民的博客
10-27 9276
模板字符串 模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。 模板字符串的优点 1.字符串新写法 加强版的引号 console.log(`好好学习 \n 天天向上`); 2.内容中可以直接出现换行符 console.log(`好好学习 天天向上`); 3.字符串中嵌入变量 let name=`黄天霸`; let skill=`杀富济贫`; document.write(`&
在Vue项目中的标签的内联式css样式表使用变量字符串拼接
热门推荐
郭宝的博客
10-09 1万+
背景还原： 需要动态更改DIV标签的背景图片资源，原始代码如下图： <div class="mui-card" v-for="(item,index) in menuBarItem" :key="index"> <div class="mui-card-header mui-card-media" style="height:40v...
es6（基础五） 模板字符串与标签模板
u011705725的博客
06-20 2109
一、模板字符串       格式：``        加入内容:`${变量名称...}`        传统的输出模板如下{ var ul = document.getElementById("#uls"); var str = ''; var a = '这是一个a'; var p = '这是一个p'; str+='&lt;li style="background:red"&gt;'; ...
ES6: 模板字符串
gao_zhennan的博客
07-07 1万+
模板字符串主要用于插入表达式！
JS 模板字符串三种写法
qq_34870529的博客
04-13 7760
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
vue3父组件通过ref调用子组件的方法(组合模式，defineExpose）
最新发布
徐同保的专栏
05-09 271
vue3父组件通过ref调用子组件的方法(组合模式，defineExpose）
vue自定义指令实现v-if效果
05-01
Vue自定义指令是Vue提供的一种...需要注意的是，v-visible指令是一种比较简单的实现方式，如果涉及到较为复杂的逻辑判断，建议使用Vue的计算属性computed或watch监听数据的变化，并在模板中根据计算结果动态渲染元素。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值