1. Vue 中可是使用 v-bindhtml 中的 属性 进行绑定, 如下所示, 我们想给这个 a 标签绑定一个 title 值: 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> 
  <title>Vue Test</title> 
</head> 
<body> 
    <div id="app"> 
        <!-- here --> 
        <a href="#" v-bind:title="message">Fly me to the Moon.</a> 
    </div> 
    <script> 
        var vApp = new Vue({ 
            el: "#app", 
            data: { 
                message: "Bart Howard" 
            } 
        }) 
    </script> 
</body> 
</html>

下面是预览情况: 

 

2. 注意, 这里 v-bind:title="" 的引号内可以使用 js 表达式, 比如下面的三元运算表达式.

<div id="app"> 
    <a href="#" v-bind:title="lan === 'en' ? en : ch">Fly me to the Moon.</a> 
</div> 
<script> 
    var vApp = new Vue({ 
        el: "#app", 
        data: { 
            lan: "ch", 
            en: "Bart Howard", 
            ch: "巴特·霍华德" 
        } 
    }); 
</script>

 

3. v-bind 可是简写为 : , 比如 v-bind:href 可是简写为 :href

评论关闭
IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

怎样使用 v-html 指令