五、伊森商城前端基础-Vue v-text&v-html&v-bind&v-model p23

最新推荐文章于 2023-06-09 15:08:09 发布

131.313

最新推荐文章于 2023-06-09 15:08:09 发布

阅读量392

点赞数

分类专栏：伊森商城文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_56220914/article/details/128167039

版权

本文介绍了Vue.js中前端基础的重要概念，包括v-text用于文本渲染，避免插值闪烁问题；v-bind用于单向绑定HTML标签属性，区别于插值表达式的应用场景；最后探讨了v-model的双向绑定特性，揭示了视图与模型间的相互影响。

摘要由CSDN通过智能技术生成

1、v-text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <!-- 指数使用插值表达式的话不解析<h1>标签 -->
        <!-- 还有一个弊端，就是网络不好的时候，页面没完全渲染好之前会将{
  {msg}}显示出来 -->
        {
  {msg}}
        <br/>

        <!-- 将msg的值取出来当成<span>里面的内容 -->
        <!-- 会将值里面的标签进行解析再打印出来 -->
        <span v-html="msg"></span>
        <br/>
        
        <!-- 相当于对标签进行转义让标签也能显示出来 -->
        <span v-text="msg"></span>
        <br/>
        <!-- 优点 -->
        <!-- v-text、v-html在网络不好，页面没完全渲染好之前不会显示多余信息出来  -->
        
        {
  {1+1}}
        <br/>

        {
  {hello()}}

    </div>



    <!-- 1、引入vue依赖 -->
    <script src="./node_modules/vue/dist/vue.js"></script>


    <script>
        new Vue({
            el: "#app",
            data:{
                msg: "<h1>Hello</h1>"
            },
            methods: {
                hello(){
                    return "World"
                }
            },
        })

    </script>


</body>
</html>