Fatal编程技术网
  • javascript/
  • Javascript VueJs、模板、v-bind、嵌入式html

Javascript VueJs、模板、v-bind、嵌入式html

javascript vue.js

Javascript VueJs、模板、v-bind、嵌入式html,javascript,vue.js,Javascript,Vue.js,我试图在vue对象中使用template属性来放置分配给该属性的嵌入式Html。当我打开网页时，我目前没有看到任何东西。我需要在模板属性中使用v-bind完成此任务示例代码如下： <!DOCTYPE html> <html lang="en"> <head> <title>Template and v-bind</title> </head> <body> <!--

我试图在vue对象中使用template属性来放置分配给该属性的嵌入式Html。当我打开网页时，我目前没有看到任何东西。我需要在模板属性中使用v-bind完成此任务示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Template and v-bind</title>
</head>

<body>
    <!-- Div to Mount App -->
    
    <div id="app"></div>
    

    <!-- Reference to Vue.js library -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    


    <!-- Script Element for our App -->
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                myName: 'Cool Name'
            },
            template: `
                <div>
                    <div v-bind:name="myName"></div> 
                </div>`
                
        });
    </script>


</body>

</html>




模板与v-bind
var app=新的Vue({
el:“#应用程序”，
数据：{
我的名字：“酷名字”
},
模板：`
`
});
我正在运行一个测试，回来查看添加的关于删除
标记的注释，我同意

但是，您还存在一个问题，即您试图将
myName
绑定到一个
标记
name
属性，该属性不存在。用把手代替

以下是工作代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Template and v-bind</title>
</head>

<body>
  <!-- Div to Mount App -->
  <div id="app"></div>

  <!-- Reference to Vue.js library -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <!-- Script Element for our App -->
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        myName: 'Cool Name'
      },
      template: `
                <div>
                    <div>{{ myName }}</div> 
                </div>`

    });
  </script>

</body>

</html>


模板与v-bind
var app=新的Vue({
el:“#应用程序”，
数据：{
我的名字：“酷名字”
},
模板：`
{{myName}}
`
});
您可以将属性值呈现为html内容，但它将以html内容的形式呈现，而不受VueJS的影响 所以在下面的代码中

<html lang="en">
    <head>
        <title>Template and v-bind</title>
    </head>
    <body>
        <!-- Div to Mount App -->   
        <div id="app" v-html="htmlCont">{{ htmlCont }}</div>
        <!-- Reference to Vue.js library -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <!-- Script Element for our App -->
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    myName: 'Cool Name',
                    htmlCont: `
                    <div>
                        <div>{{ myName }}</div> 
                    </div>`
                },   
            });
        </script>
    </body>
</html>


模板与v-bind
{{htmlCont}}
var app=新的Vue({
el:“#应用程序”，
数据：{
myName:'酷名字'，
htmlCont：`
{{myName}}
`
},   
});
我成功地将这个html放入

<div>
    <div>{{ myName }}</div> 
</div>


{{myName}}
但是（myName）变量不会由VueJS呈现
因此，您必须使用Vue组件，如下所示

<html lang="en">
    <head>
        <title>Template and v-bind</title>
    </head>
    <body>
        <!-- Div to Mount App -->   
        <div id="app"><html-cont></html-cont></div>
        <!-- Reference to Vue.js library -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <!-- Script Element for our App -->
        <script>
            data_obj = {
                myName: 'Cool Name'
            }
            Vue.component('html-cont',{
                data: function() { return data_obj},
                template: `
                    <div>
                        <div>{{ myName }}</div> 
                    </div>`
                }
            );
            var app = new Vue({
                el: '#app',
                data: data_obj
            });
        </script>
    </body>
</html>


模板与v-bind
数据对象={
我的名字：“酷名字”
}
Vue.component（'html-cont'{
data:function（）{return data_obj}，
模板：`
{{myName}}
`
}
);
var app=新的Vue({
el:“#应用程序”，
数据：数据对象
});
从
中删除
包装器，然后再试一次。@Siddharajsinh Zala good Catch我试过你的方法，效果很好；然而，有没有一种方法可以使用v-bind来完成同样的事情呢。我需要这种方法来上课。我试图将你的答案标记为解决方案，但我没有信誉点。谢谢。为了能够使用v-bind，HTML元素需要有一个
value
属性。这是一本书。我做了一些额外的测试来证实这一点。您可以对禁用的
进行
v-bind:value
，只输出值。您应该能够接受我的回答，因为您发布了以下问题：。确保您已登录。此答案非常有效。我感谢你的帮助。